diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index c98804ac..cce15d18 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -279,6 +279,7 @@ const config: Config = {
         'room-side-panel-margin': { value: '1.5rem' },
         'room-control-bar': { value: '80px' },
         'room-reaction-toolbar-height': { value: '42px' },
+        'tooltip-spacing': { value: '8px' },
       },
       spacing,
     }),
diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx
index c918e666..8dac11ad 100644
--- a/src/frontend/src/primitives/TooltipWrapper.tsx
+++ b/src/frontend/src/primitives/TooltipWrapper.tsx
@@ -48,31 +48,31 @@ export const TooltipWrapper = ({
  */
 const StyledTooltip = styled(RACTooltip, {
   base: {
-    boxShadow: '0 8px 20px rgba(0 0 0 / 0.1)',
+    boxShadow: '0 var(--sizes-tooltip-spacing) 20px rgba(0 0 0 / 0.1)',
     borderRadius: '4px',
     backgroundColor: 'primaryDark.100',
     color: 'gray.100',
     forcedColorAdjust: 'none',
     outline: 'none',
-    padding: '2px 8px',
+    padding: '2px var(--sizes-tooltip-spacing)',
     maxWidth: '200px',
     textAlign: 'center',
     fontSize: 14,
     transform: 'translate3d(0, 0, 0)',
     '&[data-placement=top]': {
-      marginBottom: '8px',
+      marginBottom: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateY(4px)',
     },
     '&[data-placement=bottom]': {
-      marginTop: '8px',
+      marginTop: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateY(-4px)',
     },
     '&[data-placement=right]': {
-      marginLeft: '8px',
+      marginLeft: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateX(-4px)',
     },
     '&[data-placement=left]': {
-      marginRight: '8px',
+      marginRight: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateX(4px)',
     },
     '& .react-aria-OverlayArrow svg': {