diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index d049a1f94..1421fc42e 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -29,4 +29,9 @@
   })
 </script>
 
-<IndicatorSet {componentId} color="rgb(120, 170, 244)" transition {zIndex} />
+<IndicatorSet
+  {componentId}
+  color="var(--spectrum-global-color-gray-600)"
+  transition
+  {zIndex}
+/>
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index bb7185621..e911f51b3 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -5,7 +5,7 @@
 
 <IndicatorSet
   componentId={$builderStore.selectedComponentId}
-  color="rgb(66, 133, 244)"
+  color="var(--spectrum-global-color-blue-900)"
   zIndex="910"
   transition
 />