diff --git a/packages/ui/src/styles/design-system.css b/packages/ui/src/styles/design-system.css
index ad71ebc7..9acb85e6 100644
--- a/packages/ui/src/styles/design-system.css
+++ b/packages/ui/src/styles/design-system.css
@@ -294,6 +294,16 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Surface layer tokens (Theme.colors.surface.*) */
+  --color-surface-background: var(--surface-background);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-muted: var(--surface-muted);
+  --color-surface-muted-foreground: var(--surface-muted-foreground);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-surface-elevated-foreground: var(--surface-elevated-foreground);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-subtle: var(--surface-subtle);
+
   /* Interactive state tokens (Theme.colors.interactive.*) */
   --color-interactive-hover: var(--interactive-hover);
   --color-interactive-active: var(--interactive-active);
diff --git a/screenshots/badge-after-element.png b/screenshots/badge-after-element.png
new file mode 100644
index 00000000..bdc8f71a
Binary files /dev/null and b/screenshots/badge-after-element.png differ
diff --git a/screenshots/badge-after-full.png b/screenshots/badge-after-full.png
new file mode 100644
index 00000000..40c7cd2f
Binary files /dev/null and b/screenshots/badge-after-full.png differ