diff --git a/.changeset/tokens-export-2026-09-14.md b/.changeset/tokens-export-2026-09-14.md
new file mode 100644
index 000000000..817baabca
--- /dev/null
+++ b/.changeset/tokens-export-2026-09-14.md
@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/ui': minor
+---
+
+The design token export adds `--wb-ds-ui-bg-selected`, `--wb-ds-ui-bg-selected-hover` and the size steps `--wb-ds-size-225`, `-250`, `-350`, `-450`, `-525`. Button heights L/M/XS and icon sizes L/M/S now resolve from those size steps instead of literal rem values; the rendered sizes are unchanged.
diff --git a/packages/tokens/tokens.json b/packages/tokens/tokens.json
index dca8134cb..2e56fc120 100644
--- a/packages/tokens/tokens.json
+++ b/packages/tokens/tokens.json
@@ -976,18 +976,38 @@
           "value": "16px",
           "type": "dimension"
         },
+        "225": {
+          "value": "18px",
+          "type": "dimension"
+        },
+        "250": {
+          "value": "20px",
+          "type": "dimension"
+        },
         "300": {
           "value": "24px",
           "type": "dimension"
         },
+        "350": {
+          "value": "28px",
+          "type": "dimension"
+        },
         "400": {
           "value": "32px",
           "type": "dimension"
         },
+        "450": {
+          "value": "36px",
+          "type": "dimension"
+        },
         "500": {
           "value": "40px",
           "type": "dimension"
         },
+        "525": {
+          "value": "42px",
+          "type": "dimension"
+        },
         "600": {
           "value": "48px",
           "type": "dimension"
@@ -1582,6 +1602,14 @@
           "fill-default": {
             "value": "{wb.colors.gray-100}",
             "type": "color"
+          },
+          "selected": {
+            "value": "{wb.ui.brand.fill-subtle}",
+            "type": "color"
+          },
+          "selected-hover": {
+            "value": "{wb.ui.brand.fill-subtle-hover}",
+            "type": "color"
           }
         },
         "stroke": {
@@ -2460,6 +2488,14 @@
           "fill-default": {
             "value": "{wb.colors.gray-700}",
             "type": "color"
+          },
+          "selected": {
+            "value": "{wb.ui.brand.fill-subtle}",
+            "type": "color"
+          },
+          "selected-hover": {
+            "value": "{wb.ui.brand.fill-subtle-hover}",
+            "type": "color"
           }
         },
         "stroke": {
diff --git a/packages/ui/src/components/button/styles/height.module.css b/packages/ui/src/components/button/styles/height.module.css
index 29e3b318e..b4db35c49 100644
--- a/packages/ui/src/components/button/styles/height.module.css
+++ b/packages/ui/src/components/button/styles/height.module.css
@@ -1,9 +1,9 @@
 :root {
   --wb-public-button-height-xl: var(--wb-ds-size-600);
-  --wb-public-button-height-l: 2.625rem /* missing token */;
-  --wb-public-button-height-m: 2.25rem /* missing token */;
+  --wb-public-button-height-l: var(--wb-ds-size-525);
+  --wb-public-button-height-m: var(--wb-ds-size-450);
   --wb-public-button-height-s: var(--wb-ds-size-400);
-  --wb-public-button-height-xs: 1.75rem /* missing token */;
+  --wb-public-button-height-xs: var(--wb-ds-size-350);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/icon-size.module.css b/packages/ui/src/components/button/styles/icon-size.module.css
index 8c09b216c..6a59f4582 100644
--- a/packages/ui/src/components/button/styles/icon-size.module.css
+++ b/packages/ui/src/components/button/styles/icon-size.module.css
@@ -1,8 +1,8 @@
 :root {
   --wb-public-icon-size-xl: var(--wb-ds-size-300);
-  --wb-public-icon-size-l: 1.25rem /* missing token */;
-  --wb-public-icon-size-m: 1.125rem /* missing token */;
-  --wb-public-icon-size-s: 1.125rem /* missing token */;
+  --wb-public-icon-size-l: var(--wb-ds-size-250);
+  --wb-public-icon-size-m: var(--wb-ds-size-225);
+  --wb-public-icon-size-s: var(--wb-ds-size-225);
   --wb-public-icon-size-xs: var(--wb-ds-size-200);
 }