diff --git a/components/base/toggle/toggle.tsx b/components/base/toggle/toggle.tsx
index c5b4c4a..20b5529 100644
--- a/components/base/toggle/toggle.tsx
+++ b/components/base/toggle/toggle.tsx
@@ -44,13 +44,15 @@ export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, i
     return (
         <div
             className={cx(
-                "cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+                "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+                // A whole-pixel translucent inner border stays crisp on both the gray and the brand track.
+                !slim && "inset-ring-1 inset-ring-alpha-black/10",
                 isSelected && "bg-brand-solid",
                 isSelected && isHovered && "bg-brand-solid_hover",
                 isDisabled && "cursor-not-allowed opacity-50",
                 isFocusVisible && "outline-2 outline-offset-2",
 
-                slim && "ring-1",
+                slim && "ring-1 ring-secondary ring-inset",
                 slim && isSelected && "ring-transparent",
                 classes.root,
                 className,