diff --git a/apps/ai-studio/src/components/execution/node-markers.module.css b/apps/ai-studio/src/components/execution/node-markers.module.css
index 158f88ef2..ecf2bd38e 100644
--- a/apps/ai-studio/src/components/execution/node-markers.module.css
+++ b/apps/ai-studio/src/components/execution/node-markers.module.css
@@ -1,6 +1,6 @@
 .container {
   position: absolute;
-  top: calc(100% + 0.5rem);
+  top: calc(100% + var(--wb-space-100));
   left: 0;
   font-weight: 500;
   padding: var(--ax-public-node-padding);
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--wb-space-100);
 
   &,
   * {
diff --git a/packages/sdk/src/features/diagram/diagram.tsx b/packages/sdk/src/features/diagram/diagram.tsx
index 466cd50bd..bbdd54e1e 100644
--- a/packages/sdk/src/features/diagram/diagram.tsx
+++ b/packages/sdk/src/features/diagram/diagram.tsx
@@ -208,7 +208,7 @@ function DiagramContainerComponent({ edgeTypes = {} }: DiagramContainerProps) {
         nodesDraggable={!isReadOnlyMode}
         isValidConnection={isValidConnection}
       >
-        <Background />
+        <Background color="var(--wb-ui-bg-canvas-dots)" bgColor="var(--wb-background-color)" />
       </ReactFlow>
     </div>
   );
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
index e0cab7521..0f6da5900 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
+++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
@@ -111,7 +111,7 @@
   border: 1px solid var(--wb-variable-text-suggestion-border);
   border-radius: var(--ax-public-input-border-radius-medium);
   background: var(--wb-variable-text-suggestion-bg);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+  box-shadow: 0 4px 12px var(--wb-shadow-ui-color);
 }
 
 .suggestionsContainer {
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index 3d48d6a52..bd3caf3c6 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -18,11 +18,11 @@
 @layer ui.base {
   :root {
     --wb-transition: 0.1s ease-in;
-    --wb-background-color: var(--wb-ui-bg-inset);
+    --wb-background-color: var(--wb-ui-bg-canvas);
     --wb-scroll-width: 0.375rem;
-    --wb-scroll-radius: 0.625rem;
+    --wb-scroll-radius: var(--wb-radius-125);
     --wb-scroll-thumb-color: var(--wb-components-scrollbar-bg-default);
-    --wb-scroll-track-color: transparent;
+    --wb-scroll-track-color: var(--wb-colors-transparent);
     /* Candidate for removal at the 3.0.0 close-out: the wb-text-* classes
        carry their own families, so this variable loses reach as components
        adopt them — decide then between removing it and narrowing it to
diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
index 86ae2297f..5d95b95d1 100644
--- a/packages/ui/src/components/checkbox/checkbox.module.css
+++ b/packages/ui/src/components/checkbox/checkbox.module.css
@@ -1,30 +1,30 @@
 :root {
   --ax-public-checkbox-size-medium: 1.25rem;
   --ax-public-checkbox-size-small: 1.125rem;
-  --ax-public-checkbox-size-extra-small: 1rem;
+  --ax-public-checkbox-size-extra-small: var(--wb-size-200);
 
   --ax-public-checkbox-icon-size-medium: 0.875rem;
-  --ax-public-checkbox-icon-size-small: 0.75rem;
+  --ax-public-checkbox-icon-size-small: var(--wb-size-150);
   --ax-public-checkbox-icon-size-extra-small: 0.625rem;
 
   --ax-public-checkbox-border-radius-medium: var(--wb-radius-50);
   --ax-public-checkbox-border-radius-small: var(--wb-radius-50);
   --ax-public-checkbox-border-radius-extra-small: var(--wb-radius-50);
 
-  --ax-public-checkbox-border-width: 0.0625rem;
+  --ax-public-checkbox-border-width: var(--wb-size-12);
 
   --ax-public-checkbox-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-checkbox-bg: var(--wb-ui-bg-base);
-  --ax-public-checkbox-icon-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-checkbox-icon-color: var(--wb-ui-text-onaccent-default);
 
   --ax-public-checkbox-checked-bg: var(--wb-components-selector-fill-checked);
 
   --ax-public-checkbox-focus-border-color: var(--wb-ui-stroke-subtle);
-  --ax-public-checkbox-focus-border-shadow: var(--wb-ui-text-default);
+  --ax-public-checkbox-focus-border-shadow: var(--wb-shadow-ui-focus);
 
   --ax-public-checkbox-disabled-bg: var(--wb-ui-bg-inset);
   --ax-public-checkbox-disabled-border-color: var(--wb-ui-stroke-subtle);
-  --ax-public-checkbox-disabled-icon-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-checkbox-disabled-icon-color: var(--wb-ui-icon-disabled);
 }
 
 @layer ui.component {
@@ -71,7 +71,7 @@
     position: relative;
     margin: 0;
     border: var(--ax-public-checkbox-border-width) solid var(--ax-public-checkbox-border-color);
-    background-color: white;
+    background-color: var(--ax-public-checkbox-bg);
     cursor: pointer;
     vertical-align: middle;
     transition: all var(--ax-public-transition);
@@ -104,7 +104,9 @@
     }
 
     &:focus-visible {
-      box-shadow: 0px 0px 0px 2px var(--ax-public-checkbox-focus-border-shadow);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-checkbox-focus-border-shadow);
       border-color: var(--ax-public-checkbox-border-color);
       outline: none;
     }
diff --git a/packages/ui/src/components/chips/chips.module.css b/packages/ui/src/components/chips/chips.module.css
index f3473f18e..869ec6dfe 100644
--- a/packages/ui/src/components/chips/chips.module.css
+++ b/packages/ui/src/components/chips/chips.module.css
@@ -1,3 +1,7 @@
+:root {
+  --ax-public-chip-focus-ring-color: var(--wb-shadow-ui-focus);
+}
+
 @layer ui.component {
   .chip {
     display: inline-flex;
@@ -62,7 +66,9 @@
     cursor: pointer;
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--wb-ui-focus-ring);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-chip-focus-ring-color);
       outline: none;
     }
   }
diff --git a/packages/ui/src/components/date-picker/date-picker.module.css b/packages/ui/src/components/date-picker/date-picker.module.css
index 701b66a61..f8829b5d0 100644
--- a/packages/ui/src/components/date-picker/date-picker.module.css
+++ b/packages/ui/src/components/date-picker/date-picker.module.css
@@ -29,8 +29,8 @@
 
   .calendar {
     background: var(--ax-public-date-picker-dropdown-background);
-    border: 0.0625rem solid var(--ax-public-date-picker-dropdown-border-color);
-    border-radius: 0.5rem;
+    border: var(--wb-size-12) solid var(--ax-public-date-picker-dropdown-border-color);
+    border-radius: var(--wb-radius-100);
     box-shadow: var(--ax-public-date-picker-dropdown-box-shadow);
     color: var(--ax-public-date-picker-color);
   }
@@ -42,7 +42,7 @@
    * `.calendar` is the Popover popup that wraps the calendar.
    */
   .calendar :global(.rdp-root) {
-    --rdp-day_button-border-radius: 0.375rem;
+    --rdp-day_button-border-radius: var(--wb-radius-75);
     --rdp-selected-border: none;
     --rdp-today-color: var(--ax-public-date-picker-date-today-color);
     /* retheme react-day-picker's accent (range
diff --git a/packages/ui/src/components/date-picker/variables.css b/packages/ui/src/components/date-picker/variables.css
index dc10180e1..9cfa8e79f 100644
--- a/packages/ui/src/components/date-picker/variables.css
+++ b/packages/ui/src/components/date-picker/variables.css
@@ -6,15 +6,15 @@
 :root {
   --ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base);
   --ax-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default);
-  --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);
+  --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px var(--wb-shadow-ui-color);
 
   --ax-public-date-picker-color: var(--wb-ui-text-subtle-default);
   --ax-public-date-picker-header-background: var(--wb-ui-bg-elevated);
   --ax-public-date-picker-date-header-color: var(--wb-ui-text-muted-default);
   --ax-public-date-picker-nav-color: var(--wb-ui-text-subtle-default);
   --ax-public-date-picker-date-outside-color: var(--wb-ui-text-ghost-default);
-  --ax-public-date-picker-date-hover-background-color: var(--wb-ui-bg-elevated);
-  --ax-public-date-picker-date-selected-background-color: var(--wb-components-selector-fill-checked);
+  --ax-public-date-picker-date-hover-background-color: var(--wb-components-datepicker-bg-secondary);
+  --ax-public-date-picker-date-selected-background-color: var(--wb-components-datepicker-bg-primary);
   --ax-public-date-picker-date-selected-color: var(--wb-ui-text-default);
   --ax-public-date-picker-date-today-color: var(--wb-ui-stroke-highlight);
 }
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index a57ac1199..0d49ae581 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/packages/ui/src/components/modal/modal.module.css
@@ -3,28 +3,27 @@
   --ax-public-modal-border-radius: var(--wb-radius-200);
   --ax-public-modal-padding: var(--wb-space-200);
 
-  --ax-public-modal-description-size: 0.625rem;
+  --ax-public-modal-description-size: var(--wb-font-size-125);
   --ax-public-modal-description-line-height: 140%;
 
   --ax-public-modal-icon-padding: var(--wb-space-112);
   --ax-public-modal-content-padding: var(--wb-space-300) var(--wb-space-200);
-  --ax-public-modal-footer-padding: 0px var(--wb-space-200) var(--wb-space-200) var(--wb-space-200);
+  --ax-public-modal-footer-padding: var(--wb-space-0) var(--wb-space-200) var(--wb-space-200) var(--wb-space-200);
 
   --ax-public-modal-background: var(--wb-ui-bg-base);
   --ax-public-modal-backdrop-background: var(--wb-colors-gray-900);
-  --ax-public-modal-close-button-color: var(--wb-components-nav-button-icon-primary-default);
   --ax-public-modal-header-background: var(--wb-ui-bg-elevated);
   --ax-public-modal-header-border-color: var(--wb-ui-stroke-default);
   --ax-public-modal-title-color: var(--wb-ui-text-default);
   --ax-public-modal-description-color: var(--wb-ui-text-subtle-default);
-  --ax-public-modal-icon-background: var(--wb-components-button-solid-primary-default);
+  --ax-public-modal-icon-background: var(--wb-ui-brand-fill);
   --ax-public-modal-icon-color: var(--wb-ui-text-onaccent-default);
   --ax-public-modal-content-background: var(--wb-ui-bg-base);
   --ax-public-modal-footer-border-color: var(--wb-ui-stroke-default);
 
   --ax-public-modal-large-width: 30rem;
   --ax-public-modal-large-padding: var(--wb-space-300);
-  --ax-public-modal-large-title-size: 1.125rem;
+  --ax-public-modal-large-title-size: var(--wb-font-size-225);
   --ax-public-modal-large-title-line-height: 130%;
   --ax-public-modal-large-icon-padding: var(--wb-space-137);
 
@@ -37,7 +36,7 @@
   --ax-public-modal-icon-border-radius: var(--wb-radius-75);
   --ax-public-modal-icon-border-radius-large: var(--wb-radius-100);
 
-  --ax-public-modal-content-gap: 0.25rem;
+  --ax-public-modal-content-gap: var(--wb-space-50);
 }
 
 @layer ui.component {
@@ -70,7 +69,7 @@
     z-index: 1001;
     display: flex;
     flex-direction: column;
-    max-height: calc(100dvh - 3rem);
+    max-height: calc(100dvh - var(--wb-space-600));
     background-color: var(--ax-public-modal-background);
     border-radius: var(--ax-public-modal-border-radius);
     width: var(--ax-public-modal-width);
@@ -95,7 +94,7 @@
     justify-content: space-between;
     align-items: center;
     border-radius: var(--ax-public-modal-border-radius) var(--ax-public-modal-border-radius) 0 0;
-    border-bottom: 1px solid var(--ax-public-modal-header-border-color);
+    border-bottom: var(--wb-size-12) solid var(--ax-public-modal-header-border-color);
     background: var(--ax-public-modal-header-background);
   }
 
@@ -158,7 +157,7 @@
     align-self: stretch;
 
     &.separated {
-      border-top: 1px solid var(--ax-public-modal-footer-border-color);
+      border-top: var(--wb-size-12) solid var(--ax-public-modal-footer-border-color);
     }
   }
 
diff --git a/packages/ui/src/components/radio-button/radio-size.module.css b/packages/ui/src/components/radio-button/radio-size.module.css
index 02ad89204..6d3b007e2 100644
--- a/packages/ui/src/components/radio-button/radio-size.module.css
+++ b/packages/ui/src/components/radio-button/radio-size.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-radio-size-medium: 1.25rem /* missing token */;
-  --ax-public-radio-size-small: 1.125rem /* missing token */;
-  --ax-public-radio-size-extra-small: 1rem /* missing token */;
+  --ax-public-radio-size-medium: 1.25rem;
+  --ax-public-radio-size-small: 1.125rem;
+  --ax-public-radio-size-extra-small: var(--wb-size-200);
 
-  --ax-public-radio-dot-size-medium: 0.625rem /* missing token */;
-  --ax-public-radio-dot-size-small: 0.5rem /* missing token */;
-  --ax-public-radio-dot-size-extra-small: 0.5rem /* missing token */;
+  --ax-public-radio-dot-size-medium: 0.625rem;
+  --ax-public-radio-dot-size-small: var(--wb-size-100);
+  --ax-public-radio-dot-size-extra-small: var(--wb-size-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css
index 461cf4d8d..9a82a9bcd 100644
--- a/packages/ui/src/components/radio-button/radio.module.css
+++ b/packages/ui/src/components/radio-button/radio.module.css
@@ -2,13 +2,13 @@
   --ax-public-radio-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-radio-bg: var(--wb-ui-bg-base);
   --ax-public-radio-checked-bg: var(--wb-components-selector-fill-checked);
-  --ax-public-radio-dot-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-radio-dot-color: var(--wb-ui-text-onaccent-default);
 
-  --ax-public-radio-focus-border-color: var(--wb-ui-text-default);
+  --ax-public-radio-focus-border-color: var(--wb-shadow-ui-focus);
 
   --ax-public-radio-disabled-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-radio-disabled-bg: var(--wb-ui-bg-inset);
-  --ax-public-radio-disabled-dot-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-radio-disabled-dot-color: var(--wb-ui-icon-disabled);
   --ax-public-radio-border-radius: var(--wb-radius-full);
 }
 
@@ -23,7 +23,7 @@
     appearance: none;
     position: relative;
     margin: 0;
-    border: 0.0625rem solid var(--ax-public-radio-border-color);
+    border: var(--wb-size-12) solid var(--ax-public-radio-border-color);
     border-radius: var(--ax-public-radio-border-radius);
     background-color: var(--ax-public-radio-bg);
     cursor: pointer;
@@ -36,9 +36,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: var(--ax-public-radio-dot-size-small);
-      height: var(--ax-public-radio-dot-size-small);
-      border-radius: 50%;
+      border-radius: var(--wb-radius-full);
       background-color: var(--ax-public-radio-dot-color);
       opacity: 0;
     }
@@ -54,7 +52,9 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--ax-public-radio-focus-border-color);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-radio-focus-border-color);
     }
 
     &:disabled {
diff --git a/packages/ui/src/components/select/select-button/select-button.module.css b/packages/ui/src/components/select/select-button/select-button.module.css
index 0699e6cad..335ab24ce 100644
--- a/packages/ui/src/components/select/select-button/select-button.module.css
+++ b/packages/ui/src/components/select/select-button/select-button.module.css
@@ -1,8 +1,9 @@
 :root {
-  --ax-public-select-border-size: 0.0625rem;
+  --ax-public-select-border-size: var(--wb-size-12);
   --ax-public-select-button-color: var(--wb-ui-text-default);
   --ax-public-select-button-border-color: var(--wb-components-text-field-stroke-default);
   --ax-public-select-button-border-color-focus: var(--wb-components-text-field-stroke-focus);
+  --ax-public-select-button-focus-ring-color: var(--wb-shadow-ui-focus);
   --ax-public-select-button-color-disabled: var(--wb-components-text-field-stroke-default);
 
   --ax-public-select-button-background-color-error: var(--wb-components-text-field-bg-primary-critical);
@@ -44,6 +45,9 @@
     &:focus-visible {
       border-color: var(--ax-public-select-button-border-color-focus);
       outline: none;
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-select-button-focus-ring-color);
     }
 
     &:disabled {
diff --git a/packages/ui/src/components/snackbar/components/action-buttons.module.css b/packages/ui/src/components/snackbar/components/action-buttons.module.css
index 4e32c0171..4426a57ae 100644
--- a/packages/ui/src/components/snackbar/components/action-buttons.module.css
+++ b/packages/ui/src/components/snackbar/components/action-buttons.module.css
@@ -2,7 +2,7 @@
   .container {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--wb-space-100);
     margin-left: auto;
   }
 }
diff --git a/packages/ui/src/components/snackbar/components/icon.module.css b/packages/ui/src/components/snackbar/components/icon.module.css
index d969ca01e..1171ab12f 100644
--- a/packages/ui/src/components/snackbar/components/icon.module.css
+++ b/packages/ui/src/components/snackbar/components/icon.module.css
@@ -1,7 +1,7 @@
 @layer ui.component {
   .container {
     display: flex;
-    padding-top: 0.125rem;
+    padding-top: var(--wb-space-25);
 
     &.center {
       align-self: center;
diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css
index 77f338eae..0951ce643 100644
--- a/packages/ui/src/components/snackbar/snackbar.module.css
+++ b/packages/ui/src/components/snackbar/snackbar.module.css
@@ -1,5 +1,5 @@
 :root {
-  --ax-public-snackbar-border-size: 0.0625rem;
+  --ax-public-snackbar-border-size: var(--wb-size-12);
   --ax-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200);
   --ax-public-snackbar-border-radius: var(--wb-radius-100);
   --ax-public-snackbar-content-gap: var(--wb-space-150);
@@ -9,34 +9,32 @@
   --ax-public-snackbar-subtitle-color: var(--wb-ui-text-subtle-default);
   --ax-public-snackbar-close-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-default-border: var(--wb-ui-stroke-subtle);
+  --ax-public-snackbar-default-border: var(--wb-components-snackbar-stroke-default);
   --ax-public-snackbar-default-background: var(--wb-ui-bg-base);
   --ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-success-border: var(--wb-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success);
   --ax-public-snackbar-success-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-success) 0%, var(--wb-components-snackbar-bg-success) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-success), var(--wb-components-snackbar-bg-success)),
     var(--wb-ui-bg-base);
-  --ax-public-snackbar-success-icon-color: var(--wb-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-icon-color: var(--wb-components-snackbar-stroke-success);
 
-  --ax-public-snackbar-error-border: var(--wb-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical);
   --ax-public-snackbar-error-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-critical) 0%, var(--wb-components-snackbar-bg-critical) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-critical), var(--wb-components-snackbar-bg-critical)),
     var(--wb-ui-bg-base);
-  --ax-public-snackbar-error-icon-color: var(--wb-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-icon-color: var(--wb-components-snackbar-stroke-critical);
 
-  --ax-public-snackbar-warning-border: var(--wb-colors-orange-300); /* missing token */
+  --ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning);
   --ax-public-snackbar-warning-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-warning) 0%, var(--wb-components-snackbar-bg-warning) 100%),
+    linear-gradient(var(--wb-components-snackbar-bg-warning), var(--wb-components-snackbar-bg-warning)),
     var(--wb-ui-bg-base);
+  --ax-public-snackbar-warning-icon-color: var(--wb-ui-icon-warning-default);
 
-  --ax-public-snackbar-warning-icon-color: var(--wb-colors-orange-300); /* missing token */
-
-  --ax-public-snackbar-info-border: var(--wb-components-selector-fill-checked);
+  --ax-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info);
   --ax-public-snackbar-info-background:
-    linear-gradient(0deg, var(--wb-components-snackbar-bg-info) 0%, var(--wb-components-snackbar-bg-info) 100%),
-    var(--wb-ui-bg-base);
-  --ax-public-snackbar-info-icon-color: var(--wb-colors-blue-400);
+    linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info)), var(--wb-ui-bg-base);
+  --ax-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
index 168b3d6e4..081437cde 100644
--- a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
+++ b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
@@ -2,10 +2,10 @@
   --ax-public-icon-switch-width: 4.125rem;
   --ax-public-icon-switch-height: 2.125rem;
   --ax-public-icon-switch-thumb-size: 1.75rem;
-  --ax-public-icon-switch-thumb-offset: 0.1875rem;
-  --ax-public-icon-switch-translate: 2rem;
-  --ax-public-icon-switch-padding: 0.5rem;
-  --ax-public-icon-switch-icon-size: 1rem;
+  --ax-public-icon-switch-thumb-offset: var(--wb-size-37);
+  --ax-public-icon-switch-translate: var(--wb-size-400);
+  --ax-public-icon-switch-padding: var(--wb-space-100);
+  --ax-public-icon-switch-icon-size: var(--wb-size-200);
 
   --ax-public-icon-switch-track-bg: var(--wb-ui-bg-inset);
   --ax-public-icon-switch-thumb-bg-primary: var(--wb-components-selector-fill-checked);
@@ -49,7 +49,7 @@
     left: var(--ax-public-icon-switch-thumb-offset);
     width: var(--ax-public-icon-switch-thumb-size);
     height: var(--ax-public-icon-switch-thumb-size);
-    border-radius: 50%;
+    border-radius: var(--wb-radius-full);
     transition: transform 0.1s ease-in-out;
     display: flex;
     align-items: center;
diff --git a/packages/ui/src/components/switch/switch-size.module.css b/packages/ui/src/components/switch/switch-size.module.css
index 1305dda2f..9543fe743 100644
--- a/packages/ui/src/components/switch/switch-size.module.css
+++ b/packages/ui/src/components/switch/switch-size.module.css
@@ -1,19 +1,17 @@
-/* public variables */
 :root {
   --ax-public-switch-width-medium: 1.875rem;
   --ax-public-switch-height-medium: 1.25rem;
-  --ax-public-switch-thumb-padding-medium: 0.1875rem;
+  --ax-public-switch-thumb-padding-medium: var(--wb-size-37);
 
   --ax-public-switch-width-small: 1.75rem;
   --ax-public-switch-height-small: 1.125rem;
-  --ax-public-switch-thumb-padding-small: 0.1875rem;
+  --ax-public-switch-thumb-padding-small: var(--wb-size-37);
 
   --ax-public-switch-width-extra-small: 1.625rem;
-  --ax-public-switch-height-extra-small: 1rem;
-  --ax-public-switch-thumb-padding-extra-small: 0.1875rem;
+  --ax-public-switch-height-extra-small: var(--wb-size-200);
+  --ax-public-switch-thumb-padding-extra-small: var(--wb-size-37);
 }
 
-/* private calculations */
 :root {
   --ax-switch-thumb-size-medium: calc(
     var(--ax-public-switch-height-medium) - 2 * var(--ax-public-switch-thumb-padding-medium)
diff --git a/packages/ui/src/components/switch/switch.module.css b/packages/ui/src/components/switch/switch.module.css
index 28d0f7950..c23ea4f28 100644
--- a/packages/ui/src/components/switch/switch.module.css
+++ b/packages/ui/src/components/switch/switch.module.css
@@ -6,12 +6,12 @@
   --ax-public-switch-disabled-border-color: var(--wb-ui-stroke-subtle);
   --ax-public-track-no-selected-color: var(--wb-ui-bg-base);
   --ax-public-track-selected-color: var(--wb-components-selector-fill-checked);
-  --ax-public-thumb-no-selected-color: var(--wb-components-nav-button-icon-primary-default);
-  --ax-public-thumb-disabled-color: var(--wb-components-nav-button-icon-primary-disabled);
-  --ax-public-thumb-selected-color: var(--wb-colors-gray-100); /* missing token */
+  --ax-public-thumb-no-selected-color: var(--wb-ui-text-subtle-default);
+  --ax-public-thumb-disabled-color: var(--wb-ui-icon-disabled);
+  --ax-public-thumb-selected-color: var(--wb-ui-text-onaccent-default);
 
-  --ax-public-switch-focus-border-color: var(--wb-ui-text-default);
-  --ax-public-switch-border-size: 0.0625rem;
+  --ax-public-switch-focus-border-color: var(--wb-shadow-ui-focus);
+  --ax-public-switch-border-size: var(--wb-size-12);
 }
 
 @layer ui.base {
@@ -22,7 +22,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    border-radius: 100px;
+    border-radius: var(--wb-radius-full);
     border: var(--ax-public-switch-border-size) solid var(--ax-public-switch-outline-color);
 
     &:not(:hover) {
@@ -31,7 +31,7 @@
 
     .thumb {
       position: absolute;
-      border-radius: 100px;
+      border-radius: var(--wb-radius-full);
       background-color: var(--ax-public-thumb-no-selected-color);
       transition: transform var(--ax-public-transition);
     }
@@ -40,7 +40,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      border-radius: 100px;
+      border-radius: var(--wb-radius-full);
     }
 
     .thumb-contents {
@@ -49,7 +49,9 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--ax-public-switch-focus-border-color);
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread)
+        var(--ax-public-switch-focus-border-color);
     }
 
     &[data-checked] {
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index 4cc184bd8..bbc1f0fde 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -27,8 +27,8 @@
   }
 
   .arrow {
-    width: 10px;
-    height: 4px;
+    width: 0.625rem;
+    height: var(--wb-size-50);
     background-color: var(--tooltip-background);
     clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
diff --git a/packages/ui/src/shared/styles/list-item.module.css b/packages/ui/src/shared/styles/list-item.module.css
index b6e77d0ca..28db0bbae 100644
--- a/packages/ui/src/shared/styles/list-item.module.css
+++ b/packages/ui/src/shared/styles/list-item.module.css
@@ -5,8 +5,8 @@
   --ax-public-list-item-color: var(--wb-ui-text-default);
 
   --ax-public-list-item-background-color-focus: var(--wb-ui-bg-fill-hover);
-  --ax-public-list-item-outline-color-focus: var(--wb-ui-stroke-focus);
-  --ax-public-list-item-outline-size: 0.0625rem;
+  --ax-public-list-item-outline-color-focus: var(--wb-shadow-ui-focus);
+  --ax-public-list-item-outline-size: var(--wb-shadow-ui-focus-element-spread);
 
   --ax-public-list-item-color-destructive: var(--wb-ui-text-critical-default);
   --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-10);
@@ -40,12 +40,15 @@
 
     &:focus-visible,
     &[data-highlighted] {
-      outline: var(--ax-public-list-item-outline-size) solid var(--ax-public-list-item-outline-color-focus);
+      outline: none;
+      box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y)
+        var(--wb-shadow-ui-focus-element-blur) var(--ax-public-list-item-outline-size)
+        var(--ax-public-list-item-outline-color-focus);
       background-color: var(--ax-public-list-item-background-color-focus);
     }
 
     /* After the highlight rule: a selected item keeps its selected colors
-       while highlighted — the outline alone marks the keyboard cursor. */
+       while highlighted — the ring alone marks the keyboard cursor. */
     &[data-selected] {
       background-color: var(--ax-public-list-item-background-color-selected);
       color: var(--ax-public-list-item-color-selected);