diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 0d91ade3..9f523c6d 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,7 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
+- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
+- Added the `--sl-panel-border-width` design token
 - Added missing background color to `<sl-details>`
 - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 2b3818c6..4b9b2381 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -16,8 +16,8 @@ export default css`
     display: flex;
     align-items: stretch;
     background-color: rgb(var(--sl-surface-base-alt));
-    border: solid 1px rgb(var(--sl-color-neutral-200));
-    border-top-width: 3px;
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
+    border-top-width: calc(var(--sl-panel-border-width) * 3);
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--box-shadow);
     font-family: var(--sl-font-sans);
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 0de76836..c147832f 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -28,7 +28,7 @@ export default css`
   }
 
   .color-picker--inline {
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
   }
 
   .color-picker__grid {
diff --git a/src/components/dropdown/dropdown.styles.ts b/src/components/dropdown/dropdown.styles.ts
index 0859b26e..f78d9bc5 100644
--- a/src/components/dropdown/dropdown.styles.ts
+++ b/src/components/dropdown/dropdown.styles.ts
@@ -28,7 +28,7 @@ export default css`
     font-weight: var(--sl-font-weight-normal);
     color: var(--color);
     background-color: rgb(var(--sl-panel-background-color));
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--sl-shadow-large);
     overflow: auto;
diff --git a/src/components/menu-divider/menu-divider.styles.ts b/src/components/menu-divider/menu-divider.styles.ts
index 7a88dfae..2e1f1cef 100644
--- a/src/components/menu-divider/menu-divider.styles.ts
+++ b/src/components/menu-divider/menu-divider.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .menu-divider {
-    border-top: solid 1px rgb(var(--sl-panel-border-color));
+    border-top: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     margin: var(--sl-spacing-x-small) 0;
   }
 `;
diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts
index c61075dc..039531e2 100644
--- a/src/components/radio-group/radio-group.styles.ts
+++ b/src/components/radio-group/radio-group.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .radio-group {
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-large);
     padding-top: var(--sl-spacing-x-small);
diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts
index 0df37eb1..7f0d464a 100644
--- a/src/themes/dark.styles.ts
+++ b/src/themes/dark.styles.ts
@@ -555,6 +555,7 @@ export default css`
 
     --sl-panel-background-color: var(--sl-surface-base-alt);
     --sl-panel-border-color: var(--sl-color-neutral-200);
+    --sl-panel-border-width: 1px;
 
     /*
      * Tooltips
diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts
index 20ac456a..b3a1eb50 100644
--- a/src/themes/light.styles.ts
+++ b/src/themes/light.styles.ts
@@ -555,6 +555,7 @@ export default css`
 
     --sl-panel-background-color: var(--sl-surface-base-alt);
     --sl-panel-border-color: var(--sl-color-neutral-200);
+    --sl-panel-border-width: 1px;
 
     /*
      * Tooltips