diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 5996b182eb..c9872f246b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -509,9 +509,9 @@
     transition: padding 260ms ease-out, border 260ms ease-out;
   }
   .component.pad :global(> *) {
-    padding: 12px !important;
-    gap: 12px !important;
-    border: 2px dotted var(--spectrum-global-color-gray-400) !important;
+    padding: var(--spacing-l) !important;
+    gap: var(--spacing-l) !important;
+    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
   }
   .interactive :global(*) {
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index b07a3213d9..9ad17ceff0 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -27,7 +27,7 @@ export const styleable = (node, styles = {}) => {
   const setupStyles = (newStyles = {}) => {
     let baseStyles = {}
     if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-400)"
       baseStyles.padding = "var(--spacing-l)"
       baseStyles.overflow = "hidden"
     }