diff --git a/sass/_vars.scss b/sass/_vars.scss
index a19c62c24..079ce043d 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -13,19 +13,19 @@ $vars: (
     colors: (
         canvas: (
             default: (
-                light: color(gray, 1),
-                dark: color(gray, 7),
+                light: color(gray, 0),
+                dark: color(gray, 6),
             ),
             outset: (
-                light: color(gray, 0),
+                light: white,
                 dark: color(gray, 5),
             ),
             inset: (
                 light: color(gray, 1),
-                dark: color(gray, 8),
+                dark: color(gray, 7),
             ),
             overlay: (
-                light: color(gray, 0),
+                light: white,
                 dark: color(gray, 9),
             ),
         ),
@@ -35,11 +35,11 @@ $vars: (
                 dark: color(gray, 8),
             ),
             subtle: (
-                light: color(gray, 2),
+                light: color(gray, 3),
                 dark: color(gray, 7),
             ),
             focus: (
-                light: color(indigo, 6),
+                light: color(indigo, 5),
                 dark: color(indigo, 5),
             ),
         ),
@@ -61,6 +61,16 @@ $vars: (
                 dark: color(gray, 8),
             ),
         ),
+        shadow: (
+            default: (
+                light: color(gray, 3),
+                dark: color(gray, 8),
+            ),
+            inset: (
+                light: color(gray, 2),
+                dark: color(gray, 7),
+            ),
+        ),
         accent: (
             card: (
                 light: color(blue, 5),
diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte
index 80d3f18fb..edc00e11c 100644
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@@ -190,25 +190,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         position: relative;
         background: var(--canvas-outset);
         border-radius: 5px;
-        border: 1px solid var(--border-default);
 
-        box-shadow: 0px 0px 2px 0px var(--border-default);
         transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
 
+        /* This pseudo-element is required to display
+               the inset box-shadow above field contents */
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            pointer-events: none;
+            border-radius: 5px;
+            border: 1px solid var(--border-subtle);
+            box-shadow: inset 0 0 1px 1px var(--shadow-inset);
+        }
+
         &:focus-within {
             outline: none;
-
-            /* This pseudo-element is required to display
-               the inset box-shadow above field contents */
             &::after {
-                content: "";
-                position: absolute;
-                top: -1px;
-                right: -1px;
-                bottom: -1px;
-                left: -1px;
-                pointer-events: none;
-                border-radius: 5px;
                 box-shadow: inset 0 0 0 2px var(--border-focus);
             }
         }