diff --git a/.changeset/cold-plums-doubt.md b/.changeset/cold-plums-doubt.md
new file mode 100644
index 00000000000..27b2ecc5ae4
--- /dev/null
+++ b/.changeset/cold-plums-doubt.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Updates WB `color` references to use the new `semanticColor` tokens instead.
diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
index c1043a8f3e7..e57b656ebd4 100644
--- a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
+++ b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
@@ -1,4 +1,4 @@
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import DeviceFramer from "../device-framer";
@@ -17,8 +17,9 @@ const SampleContent = () => {
     return (
         <div
             style={{
-                backgroundColor: color.blue,
-                color: color.offWhite,
+                backgroundColor:
+                    semanticColor.core.background.instructive.default,
+                color: semanticColor.core.foreground.knockout.default,
                 width: "90%",
                 height: "300px",
                 padding: spacing.medium_16,
diff --git a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
index 3935e631c9f..e7424367bb1 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
+++ b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
@@ -1,7 +1,7 @@
 import {ApiOptions} from "@khanacademy/perseus";
 import {getDefaultFigureForType} from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
         width: containerSize,
         padding: padding,
         marginInlineStart: spacing.medium_16,
-        border: `1px solid ${color.offBlack32}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: spacing.xxxSmall_4,
     },
 });
diff --git a/packages/perseus-editor/src/components/checkbox.tsx b/packages/perseus-editor/src/components/checkbox.tsx
index 0d39f8f9490..e2316ae542a 100644
--- a/packages/perseus-editor/src/components/checkbox.tsx
+++ b/packages/perseus-editor/src/components/checkbox.tsx
@@ -2,7 +2,7 @@
 /**
  * Reusable checkbox component.
  **/
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -100,8 +100,14 @@ export default class Checkbox extends React.Component<CheckboxProps> {
                                             rx={borderRadius}
                                         />
                                         <path
-                                            fill={color.white}
-                                            stroke={color.white}
+                                            fill={
+                                                semanticColor.core.foreground
+                                                    .knockout.default
+                                            }
+                                            stroke={
+                                                semanticColor.core.foreground
+                                                    .knockout.default
+                                            }
                                             d="M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47
                                  10.53c0.23.23.59.23.81
                                  0l4.55-4.55a0.58.58 0 0
@@ -111,7 +117,10 @@ export default class Checkbox extends React.Component<CheckboxProps> {
                                 )}
                                 {!checked && (
                                     <rect
-                                        fill={color.white}
+                                        fill={
+                                            semanticColor.core.foreground
+                                                .knockout.default
+                                        }
                                         stroke={gray68}
                                         width={size - 2 * padding}
                                         height={size - 2 * padding}
diff --git a/packages/perseus-editor/src/components/coordinate-pair-input.tsx b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
index ef9edef101f..e47810cfccd 100644
--- a/packages/perseus-editor/src/components/coordinate-pair-input.tsx
+++ b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -97,8 +97,8 @@ const styles = StyleSheet.create({
         width: spacing.xxxLarge_64,
     },
     errorField: {
-        borderColor: wbColor.red,
-        backgroundColor: wbColor.fadedRed8,
+        borderColor: semanticColor.core.border.critical.default,
+        backgroundColor: semanticColor.core.background.critical.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
index bc204f4b125..2831f042846 100644
--- a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
+++ b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
@@ -8,7 +8,7 @@
  * If you need to handle `onSubmit`, please use <TextField> directly with your
  * own <form> that wraps all text fields in the form.
  **/
-import {color, color as WBColor} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
@@ -150,8 +150,8 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         }
 
         const borderColorStyle = focused
-            ? focusBorderColor || WBColor.blue
-            : borderColor || WBColor.offBlack16;
+            ? focusBorderColor || semanticColor.focus.outer
+            : borderColor || semanticColor.core.border.neutral.subtle;
         extraStyles.border = `1px solid ${borderColorStyle}`;
 
         const wrappedIcon = icon && (
@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
         marginBottom: 0,
     },
     defaultBackground: {
-        backgroundColor: color.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     icon: {
         display: "flex",
diff --git a/packages/perseus-editor/src/components/heading.tsx b/packages/perseus-editor/src/components/heading.tsx
index d5b25347bd3..426b5d24da3 100644
--- a/packages/perseus-editor/src/components/heading.tsx
+++ b/packages/perseus-editor/src/components/heading.tsx
@@ -1,6 +1,6 @@
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
         // match otherwise there's a gap from this header to the edge
         // of the editor borders.
         marginInline: -10,
-        backgroundColor: color.offBlack8,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
         padding: spacing.xSmall_8,
         width: "calc(100% + 20px)",
     },
diff --git a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
index ffc28bb0ae2..1a78b60cea3 100644
--- a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -43,8 +43,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -129,8 +129,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -214,8 +214,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -299,8 +299,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -412,7 +412,7 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -453,7 +453,7 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -530,8 +530,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -560,8 +560,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -646,8 +646,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -731,8 +731,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -816,8 +816,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -929,7 +929,7 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -970,7 +970,7 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1047,8 +1047,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -1077,8 +1077,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -1163,8 +1163,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1248,8 +1248,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1333,8 +1333,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1446,7 +1446,7 @@ exports[`label-image-editor popover direction snapshots should render with NONE
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1487,7 +1487,7 @@ exports[`label-image-editor popover direction snapshots should render with NONE
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1564,8 +1564,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -1594,8 +1594,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -1680,8 +1680,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1765,8 +1765,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1850,8 +1850,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1963,7 +1963,7 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2004,7 +2004,7 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2081,8 +2081,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -2111,8 +2111,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -2197,8 +2197,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2282,8 +2282,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2367,8 +2367,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2480,7 +2480,7 @@ exports[`label-image-editor popover direction snapshots should render with UP po
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2521,7 +2521,7 @@ exports[`label-image-editor popover direction snapshots should render with UP po
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 2d6f0776e86..c9b38e6293d 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -9,7 +9,11 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox, LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    semanticColor,
+    sizing,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingSmall,
     HeadingXSmall,
@@ -635,13 +639,13 @@ const styles = StyleSheet.create({
         flexDirection: "column",
     },
     answerStatusWrong: {
-        backgroundColor: color.fadedRed16,
+        backgroundColor: semanticColor.core.background.critical.subtle,
     },
     answerStatusCorrect: {
-        backgroundColor: color.fadedGreen16,
+        backgroundColor: semanticColor.core.background.success.subtle,
     },
     answerStatusUngraded: {
-        backgroundColor: color.fadedBlue16,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
     },
     buttonRow: {
         display: "flex",
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
index f32eeabba76..89e121f1b80 100644
--- a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
@@ -1,6 +1,6 @@
 import {createMathField, useMathInputI18n} from "@khanacademy/math-input";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {useRef, useEffect} from "react";
@@ -79,8 +79,8 @@ const styles = StyleSheet.create({
         display: "inline-block",
         borderStyle: "solid",
         borderWidth: 1,
-        borderColor: color.offBlack50,
+        borderColor: semanticColor.core.border.neutral.default,
         borderRadius: 3,
-        background: color.white,
+        background: semanticColor.core.background.base.default,
     },
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
index 6e6aaa8a825..b31075f94d5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
@@ -1,5 +1,5 @@
 import {View} from "@khanacademy/wonder-blocks-core";
-import {spacing, color} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelXSmall,
@@ -27,7 +27,7 @@ export function InteractiveGraphCorrectAnswer(props: Props) {
                         style={{
                             paddingTop: spacing.xxSmall_6,
                             paddingBottom: spacing.xxSmall_6,
-                            color: color.offBlack64,
+                            color: semanticColor.core.foreground.neutral.subtle,
                         }}
                     >
                         Graph the correct answer in the graph below and ensure
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
index 8fbc6938136..b76fcdf4c8a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
@@ -1,7 +1,7 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextArea, TextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -79,7 +79,7 @@ export default function InteractiveGraphDescription(props: Props) {
 
 const styles = StyleSheet.create({
     caption: {
-        color: color.offBlack64,
+        color: semanticColor.core.foreground.neutral.subtle,
         paddingTop: spacing.xxSmall_6,
         paddingBottom: spacing.xxSmall_6,
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
index e661d0f41fb..f40ad70fd70 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -12,7 +12,7 @@ import Banner from "@khanacademy/wonder-blocks-banner";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
@@ -755,7 +755,7 @@ const styles = StyleSheet.create({
         marginTop: 0,
     },
     backgroundUrlInput: {
-        border: `1px solid ${color.offBlack32}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: spacing.xxxSmall_4,
         padding: spacing.xxxSmall_4,
     },
@@ -767,10 +767,10 @@ const styles = StyleSheet.create({
     },
     protractorSection: {
         marginTop: spacing.xSmall_8,
-        borderTop: `1px solid ${color.offBlack16}`,
+        borderTop: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         paddingTop: spacing.xSmall_8,
         paddingBottom: spacing.xSmall_8,
-        borderBottom: `1px solid ${color.offBlack16}`,
+        borderBottom: `1px solid ${semanticColor.core.border.neutral.subtle}`,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
index 78d1512d2e5..cfa8692c0a6 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
@@ -3,7 +3,7 @@ import {
     type LockedFigureColor,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -30,7 +30,7 @@ const ColorSwatch = (props: Props) => {
                     border: `4px solid ${lockedFigureColors[color]}`,
                     backgroundColor: filled
                         ? lockedFigureColors[color]
-                        : wbColor.white,
+                        : semanticColor.core.background.base.default,
                 },
             ]}
         />
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
     colorSwatch: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         borderRadius: "50%",
         width: spacing.large_24,
         height: spacing.large_24,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
index bbb9194b3b3..6013df136a7 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
@@ -3,7 +3,7 @@ import {
     lockedFigureFillStyles,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -51,11 +51,11 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         borderRadius: "50%",
         width: spacing.xLarge_32,
         height: spacing.large_24,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         alignItems: "center",
         justifyContent: "center",
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
index 1e82cd1204d..8567b3642fd 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
@@ -3,7 +3,7 @@ import {
     type LockedFigureColor,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -32,7 +32,7 @@ const LineSwatch = (props: Props) => {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         justifyContent: "center",
         padding: spacing.xSmall_8,
         borderRadius: spacing.xxxSmall_4,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
index 631ddab8989..4b930cb1836 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -11,7 +11,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {
     sizing,
     spacing,
-    color as wbColor,
+    semanticColor,
 } from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -342,11 +342,11 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
index 2bb9b37cbf8..cd6754a456f 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
@@ -3,7 +3,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import pencilCircle from "@phosphor-icons/core/regular/pencil-circle.svg";
 import {StyleSheet} from "aphrodite";
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     caption: {
-        color: color.offBlack64,
+        color: semanticColor.core.foreground.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
index 3a948c24852..25405cdf39b 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
@@ -7,7 +7,7 @@
  */
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ActionItem, ActionMenu} from "@khanacademy/wonder-blocks-dropdown";
-import {spacing, color} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
         marginTop: spacing.xSmall_8,
     },
     addElementSelect: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         borderRadius: spacing.xxxSmall_4,
     },
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
index 4d4b4bf8607..5d096062af6 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
@@ -11,7 +11,11 @@ import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    semanticColor,
+    sizing,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import copyIcon from "@phosphor-icons/core/assets/regular/copy.svg";
 import autoPasteIcon from "@phosphor-icons/core/assets/regular/note-pencil.svg";
@@ -479,7 +483,7 @@ const styles = StyleSheet.create({
     },
     exampleContainer: {
         background: "white",
-        border: `1px solid ${color.fadedOffBlack16}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: "4px",
         flexGrow: "1",
         listStyleType: "none",
@@ -494,7 +498,7 @@ const styles = StyleSheet.create({
     exampleContent: {
         fontFamily: `"Lato", sans-serif`,
         flexGrow: "1",
-        color: color.offBlack,
+        color: semanticColor.core.foreground.neutral.strong,
     },
     exampleRow: {
         alignItems: "center",
@@ -503,7 +507,7 @@ const styles = StyleSheet.create({
         minHeight: "44px",
     },
     exampleWorkspace: {
-        background: color.white50,
+        background: semanticColor.core.background.base.subtle,
     },
     rowSpace: {
         marginTop: spacing.xSmall_8,
@@ -523,10 +527,10 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: color.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: color.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
index 4e670c84a30..1a9a4684e8e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
@@ -14,7 +14,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -93,7 +93,9 @@ export default function LockedLabelSettings(props: Props) {
                         <LabelLarge
                             style={[
                                 {
-                                    backgroundColor: wbColor.white,
+                                    backgroundColor:
+                                        semanticColor.core.background.base
+                                            .default,
                                     color: lockedFigureColors[color],
                                 },
                                 styles.accordionHeader,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
index 4c73ec68e31..5d40157d79a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
@@ -10,7 +10,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -381,17 +381,17 @@ const styles = StyleSheet.create({
         marginBottom: spacing.xSmall_8,
     },
     errorText: {
-        color: wbColor.red,
+        color: semanticColor.core.foreground.critical.default,
     },
     addButton: {
         alignSelf: "start",
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
index 40a2eec3a8f..e4c90012ea5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
@@ -8,7 +8,7 @@ import {getDefaultFigureForType} from "@khanacademy/perseus-core";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
 import {StyleSheet} from "aphrodite";
@@ -309,7 +309,7 @@ const styles = StyleSheet.create({
         marginBottom: 0,
         marginLeft: -spacing.xxxSmall_4,
         marginRight: -spacing.xxxSmall_4,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     definingPanel: {
         // Need more space since we don't have the actions' margins.
@@ -318,7 +318,7 @@ const styles = StyleSheet.create({
     // A regular point (NOT a defining point) has label
     // accordions with white backgrounds.
     lockedPointLabelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     row: {
         flexDirection: "row",
@@ -332,7 +332,7 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
index dd3ea8022ad..5b6f1c6710e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -12,7 +12,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import arrowFatDown from "@phosphor-icons/core/regular/arrow-fat-down.svg";
 import arrowFatLeft from "@phosphor-icons/core/regular/arrow-fat-left.svg";
@@ -425,7 +425,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
     },
     pointAccordionContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     pointAccordionPanel: {
         alignItems: "start",
@@ -455,11 +455,11 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
index c04940748d3..d185d5428ce 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -12,7 +12,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {
     sizing,
     spacing,
-    color as wbColor,
+    semanticColor,
 } from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -301,10 +301,10 @@ const styles = StyleSheet.create({
         marginBottom: 0,
         marginLeft: -spacing.xxxSmall_4,
         marginRight: -spacing.xxxSmall_4,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     errorText: {
-        color: wbColor.red,
+        color: semanticColor.core.foreground.critical.default,
         marginTop: spacing.xSmall_8,
     },
     row: {
@@ -316,10 +316,10 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
index 3a8ce936685..e42dcec5853 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
@@ -3,7 +3,7 @@ import {
     lockedFigureFillStyles,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -51,10 +51,10 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         width: spacing.large_24,
         height: spacing.large_24,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         alignItems: "center",
         justifyContent: "center",
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
index 932a43a0788..bb46c40ccc1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -75,7 +75,7 @@ const StartCoordsAngle = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -86,8 +86,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
index 9e6c382b391..f8cd6368bf3 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -82,7 +82,7 @@ const StartCoordsCircle = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
index 54a7a40a076..b0306b709c5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -43,7 +43,7 @@ const StartCoordsLine = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
index 1aae3d4413a..ec88c2210a1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -42,7 +42,7 @@ const StartCoordsPoint = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
index 7347ede7959..4dea0ba9d80 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -73,7 +73,7 @@ const StartCoordsQuadratic = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -84,8 +84,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
index f915b15517a..99ecdac2df5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -60,7 +60,7 @@ const StartCoordsSinusoid = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -71,8 +71,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
index d5663d52e7d..665f93fc10d 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
@@ -32,8 +32,8 @@ exports[`Marker component rendering renders an empty marker 1`] = `
           class="labelContainer_cyxkvw"
         >
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="width: 100%;"
           >
             <input
               class="inputBase_w7cswd"
@@ -105,8 +105,8 @@ exports[`Marker component rendering renders with answers and choices 1`] = `
           class="labelContainer_cyxkvw"
         >
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="width: 100%;"
           >
             <input
               class="inputBase_w7cswd"
diff --git a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
index 5e96a55c0ad..a5bf6206bae 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
@@ -1,6 +1,6 @@
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {color, sizing, border} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, sizing, border} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusCircleIcon from "@phosphor-icons/core/bold/minus-circle-bold.svg";
 import * as React from "react";
@@ -26,13 +26,17 @@ export function RadioStatusPill({
             style={{
                 // Space between the pill and the text
                 marginInlineEnd: sizing.size_080,
-                color: correct ? color.white : color.red,
-                backgroundColor: correct ? color.activeGreen : color.fadedRed8,
+                color: correct
+                    ? semanticColor.core.foreground.knockout.default
+                    : semanticColor.core.foreground.critical.default,
+                backgroundColor: correct
+                    ? semanticColor.core.background.success.strong
+                    : semanticColor.core.background.critical.subtle,
                 // Round for single select, square for multiple select
                 borderRadius: multipleSelect
                     ? border.radius.radius_040
                     : sizing.size_240,
-                border: `1px solid ${correct ? color.activeGreen : color.red}`,
+                border: `1px solid ${correct ? semanticColor.core.border.success.strong : semanticColor.core.border.critical.default}`,
                 width: sizing.size_560,
                 flexDirection: "row",
             }}
@@ -43,7 +47,11 @@ export function RadioStatusPill({
                     size="small"
                     icon={correct ? checkIcon : minusCircleIcon}
                     style={{marginInlineEnd: sizing.size_060}}
-                    color={correct ? color.white : color.red}
+                    color={
+                        correct
+                            ? semanticColor.core.foreground.knockout.default
+                            : semanticColor.core.foreground.critical.default
+                    }
                 />
                 {String.fromCharCode(65 + index)}
             </>