diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 3f02b36600..13eae2ea7f 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -29,7 +29,7 @@ export const styleable = (node, styles = {}) => {
     // overridden by any user specified styles
     let baseStyles = {}
     if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--grey-5)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
       baseStyles.padding = "var(--spacing-l)"
       baseStyles.overflow = "hidden"
     }
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 96fb46e44c..bf4d902017 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -56,7 +56,7 @@
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 700;
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index a7e0813a50..acc8fc7619 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -83,7 +83,7 @@
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 600;
diff --git a/packages/standard-components/src/Placeholder.svelte b/packages/standard-components/src/Placeholder.svelte
index 455b6fe747..203071e0b1 100644
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/packages/standard-components/src/Placeholder.svelte
@@ -15,7 +15,7 @@
 
 <style>
   div {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
   }
 </style>
diff --git a/packages/standard-components/src/Repeater.svelte b/packages/standard-components/src/Repeater.svelte
index b7db019c06..79f044f402 100644
--- a/packages/standard-components/src/Repeater.svelte
+++ b/packages/standard-components/src/Repeater.svelte
@@ -33,7 +33,7 @@
 
 <style>
   .noRows {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
     padding: var(--spacing-l);
     display: grid;
@@ -42,6 +42,6 @@
   .noRows i {
     margin-bottom: var(--spacing-m);
     font-size: 1.5rem;
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>
diff --git a/packages/standard-components/src/ScreenSlot.svelte b/packages/standard-components/src/ScreenSlot.svelte
index 724f228c71..f6c2387cf0 100644
--- a/packages/standard-components/src/ScreenSlot.svelte
+++ b/packages/standard-components/src/ScreenSlot.svelte
@@ -30,6 +30,6 @@
   }
   span {
     font-size: var(--font-size-s);
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>
diff --git a/packages/standard-components/src/Section.svelte b/packages/standard-components/src/Section.svelte
index 9557f43e8a..5bd3364b94 100644
--- a/packages/standard-components/src/Section.svelte
+++ b/packages/standard-components/src/Section.svelte
@@ -67,7 +67,7 @@
     grid-template-columns: 1fr 1fr;
   }
   .placeholder {
-    border: 2px dashed var(--grey-5);
+    border: 2px dashed var(--spectrum-global-color-gray-600);
     padding: var(--spacing-l);
   }
 </style>
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 890f97fe13..ff35eeb38e 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -54,7 +54,7 @@
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 600;