diff --git a/example/src/Example.tsx b/example/src/Example.tsx
index 1aced2d..188c7c5 100644
--- a/example/src/Example.tsx
+++ b/example/src/Example.tsx
@@ -114,6 +114,8 @@ const Box2 = styled(Box, {
   marginTop: '$3',
   size: 100,
   borderRadius: theme.radii.lg,
+  marginRight: '-$space$6',
+  marginBottom: '-$4',
 });
 
 const FunctionBox = styled(
diff --git a/src/internals/utils.js b/src/internals/utils.js
index 21be81b..d3dc212 100644
--- a/src/internals/utils.js
+++ b/src/internals/utils.js
@@ -96,7 +96,10 @@ export function processStyles({ styles, theme, config }) {
       // Handle theme tokens, eg. `color: "$primary"` or `color: "$colors$primary"`
       const arr = val.split('$');
       const token = arr.pop();
-      const scale = arr.pop();
+      const scaleOrSign = arr.pop();
+      const maybeSign = arr.pop(); // handle negative values
+      const scale = scaleOrSign !== '-' ? scaleOrSign : undefined;
+      const sign = scaleOrSign === '-' || maybeSign === '-' ? -1 : undefined;
 
       if (scale && theme[scale]) {
         acc[key] = theme[scale][token].value;
@@ -128,6 +131,10 @@ export function processStyles({ styles, theme, config }) {
       ) {
         acc[key] = theme.letterSpacings[token].value;
       }
+
+      if (typeof acc[key] === 'number' && sign) {
+        acc[key] *= sign;
+      }
     } else if (typeof val === 'object' && val.value !== undefined) {
       // Handle cases where the value comes from the `theme` returned by `createStitches`
       acc[key] = val.value;