diff --git a/.changeset/wild-mangos-deny.md b/.changeset/wild-mangos-deny.md
new file mode 100644
index 000000000..aec33b763
--- /dev/null
+++ b/.changeset/wild-mangos-deny.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Fixing shadows
diff --git a/docs/storybook/stories/Color/Functional/Shadows.stories.tsx b/docs/storybook/stories/Color/Functional/Shadows.stories.tsx
index 49287e6d0..0d2a50148 100644
--- a/docs/storybook/stories/Color/Functional/Shadows.stories.tsx
+++ b/docs/storybook/stories/Color/Functional/Shadows.stories.tsx
@@ -17,8 +17,7 @@ const shadows = [
   'shadow-floating-small',
   'shadow-floating-medium',
   'shadow-floating-large',
-  'shadow-highlight',
-  'shadow-inset',
+  'shadow-floating-xlarge',
 ]
 
 export const Shadows = () => {
@@ -27,6 +26,23 @@ export const Shadows = () => {
       {shadows.map(shadow => (
         <ColorPreview color={shadow} shadow key={shadow} canvasColor="bgColor-default" shadowBg="bgColor-default" />
       ))}
+
+      <ColorPreview
+        color="shadow-inset"
+        shadow
+        key="shadow-inset"
+        canvasColor="bgColor-muted"
+        shadowBg="bgColor-default"
+        style={{border: `1px solid var(--borderColor-default)`}}
+      />
+      <ColorPreview
+        color="shadow-highlight"
+        shadow
+        key="shadow-highlight"
+        canvasColor="bgColor-default"
+        shadowBg="bgColor-accent-emphasis"
+        style={{border: `1px solid var(--borderColor-muted)`}}
+      />
     </>
   )
 }
diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css
index e116f93c7..154c747cf 100644
--- a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css
+++ b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css
@@ -7,6 +7,10 @@
   border-radius: var(--borderRadius-medium);
 }
 
+.ColorPreview[data-type='shadow'] {
+  height: 200px;
+}
+
 .ColorPreview-wrap {
   display: grid;
   gap: var(--stack-gap-condensed);
@@ -55,6 +59,12 @@
   border-radius: var(--borderRadius-medium);
 }
 
+[data-shadow] {
+  width: var(--base-size-128);
+  height: var(--base-size-80);
+  border-radius: var(--borderRadius-medium);
+}
+
 [data-border] {
   width: var(--base-size-48);
   height: var(--base-size-48);
diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
index 405c6e8c0..6da553bcf 100644
--- a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
+++ b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
@@ -11,6 +11,7 @@ export type ColorPreviewProps = {
   bgColorBorder?: string
   shadow?: boolean
   shadowBg?: string
+  style?: React.CSSProperties
 }
 
 export function ColorPreview({
@@ -22,20 +23,33 @@ export function ColorPreview({
   bgColorBorder,
   shadow,
   shadowBg,
+  style,
 }: ColorPreviewProps) {
   return (
     <div className="ColorPreview-wrap">
-      <div className="ColorPreview" style={{backgroundColor: `var(--${canvasColor})`}}>
+      <div className="ColorPreview" style={{backgroundColor: `var(--${canvasColor})`}} data-type={shadow && `shadow`}>
         {textColor && (
-          <p style={{color: `var(--${color})`}} data-text>
+          <p style={{color: `var(--${color})`, ...style}} data-text>
             Aa
           </p>
         )}
-        {borderColor && <div style={{borderColor: `var(--${color})`}} data-border></div>}
+        {borderColor && <div style={{borderColor: `var(--${color})`, ...style}} data-border></div>}
         {bgColor && (
-          <div style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`}} data-bg></div>
+          <div
+            style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`, ...style}}
+            data-bg
+          ></div>
+        )}
+        {shadow && (
+          <div
+            style={{
+              boxShadow: `var(--${color})`,
+              backgroundColor: `var(--${shadowBg})`,
+              ...style,
+            }}
+            data-shadow
+          ></div>
         )}
-        {shadow && <div style={{boxShadow: `var(--${color})`, backgroundColor: `var(--${shadowBg})`}} data-bg></div>}
       </div>
       <InlineCode value={color} copyClipboard />
     </div>
diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5
index f3e319a99..74f0d30ba 100644
--- a/src/tokens/functional/shadow/dark.json5
+++ b/src/tokens/functional/shadow/dark.json5
@@ -102,54 +102,59 @@
   },
   shadow: {
     inset: {
-      $value: [
-        {
-          color: '{base.color.transparent}',
-          alpha: 0,
-          offsetX: '0px',
-          offsetY: '0px',
-          blur: '0px',
-          spread: '0px',
-          inset: false,
-        },
-      ],
+      $value: {
+        color: '{base.color.black}',
+        alpha: 0.24,
+        offsetX: '0px',
+        offsetY: '1px',
+        blur: '0px',
+        spread: '0px',
+        inset: true,
+      },
       $type: 'shadow',
     },
     highlight: {
       $value: {
-        color: '{base.color.transparent}',
-        alpha: 0,
+        color: '{base.color.white}',
+        alpha: 0.12,
         offsetX: '0px',
-        offsetY: '0px',
+        offsetY: '1px',
         blur: '0px',
         spread: '0px',
-        inset: false,
+        inset: true,
       },
       $type: 'shadow',
     },
     resting: {
       xsmall: {
+        $value: {
+          color: '{base.color.black}',
+          alpha: 0.8,
+          offsetX: '0px',
+          offsetY: '1px',
+          blur: '0px',
+          spread: '0px',
+          inset: false,
+        },
+        $type: 'shadow',
+      },
+      small: {
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 0.64,
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '1px',
             blur: '0px',
             spread: '0px',
             inset: false,
           },
-        ],
-        $type: 'shadow',
-      },
-      small: {
-        $value: [
           {
-            color: '{base.color.transparent}',
-            alpha: 0,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
-            offsetY: '0px',
-            blur: '0px',
+            offsetY: '1px',
+            blur: '3px',
             spread: '0px',
             inset: false,
           },
@@ -160,12 +165,11 @@
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 1,
+            alpha: 0.8,
             offsetX: '0px',
             offsetY: '3px',
             blur: '6px',
             spread: '0px',
-            inset: false,
           },
         ],
         $type: 'shadow',
@@ -175,7 +179,7 @@
       small: {
         $value: [
           {
-            color: '{base.color.gray.6}',
+            color: '{base.color.gray.8}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',
@@ -184,10 +188,18 @@
           },
           {
             color: '{base.color.black}',
-            alpha: 0.85,
+            alpha: 0.4,
             offsetX: '0px',
-            offsetY: '16px',
-            blur: '32px',
+            offsetY: '6px',
+            blur: '12px',
+            spread: '-3px',
+          },
+          {
+            color: '{base.color.black}',
+            alpha: 0.4,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '18px',
             spread: '0px',
           },
         ],
@@ -196,32 +208,40 @@
       medium: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.gray.8}',
+            alpha: 1,
             offsetX: '0px',
-            offsetY: '4px',
-            blur: '32px',
-            spread: '-4px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '8px',
             blur: '16px',
             spread: '-4px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.16,
+            color: '{base.color.black}',
+            alpha: 0.4,
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '32px',
+            spread: '-4px',
+          },
+          {
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '24px',
             blur: '48px',
             spread: '-12px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.24,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '48px',
             blur: '96px',
@@ -232,12 +252,20 @@
       },
       large: {
         $value: [
+          {
+            color: '{base.color.gray.8}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.black}',
             alpha: 1,
             offsetX: '0px',
-            offsetY: '8px',
-            blur: '24px',
+            offsetY: '24px',
+            blur: '48px',
             spread: '0px',
           },
         ],
@@ -245,12 +273,20 @@
       },
       xlarge: {
         $value: [
+          {
+            color: '{base.color.gray.8}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.black}',
             alpha: 1,
             offsetX: '0px',
-            offsetY: '12px',
-            blur: '48px',
+            offsetY: '32px',
+            blur: '64px',
             spread: '0px',
           },
         ],
diff --git a/src/tokens/functional/shadow/light.json5 b/src/tokens/functional/shadow/light.json5
index 982982419..b62ae31c4 100644
--- a/src/tokens/functional/shadow/light.json5
+++ b/src/tokens/functional/shadow/light.json5
@@ -104,7 +104,7 @@
     inset: {
       $value: {
         color: '{base.color.black}',
-        alpha: 0.05,
+        alpha: 0.08,
         offsetX: '0px',
         offsetY: '1px',
         blur: '0px',
@@ -116,7 +116,7 @@
     highlight: {
       $value: {
         color: '{base.color.white}',
-        alpha: 0.25,
+        alpha: 0.24,
         offsetX: '0px',
         offsetY: '1px',
         blur: '0px',
@@ -129,7 +129,7 @@
       xsmall: {
         $value: {
           color: '{base.color.black}',
-          alpha: 0.06,
+          alpha: 0.1,
           offsetX: '0px',
           offsetY: '1px',
           blur: '0px',
@@ -142,21 +142,30 @@
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 0.04,
+            alpha: 0.06,
             offsetX: '0px',
             offsetY: '1px',
             blur: '0px',
             spread: '0px',
             inset: false,
           },
+          {
+            color: '{base.color.black}',
+            alpha: 0.08,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '3px',
+            spread: '0px',
+            inset: false,
+          },
         ],
         $type: 'shadow',
       },
       medium: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.15,
+            color: '{base.color.gray.7}',
+            alpha: 0.12,
             offsetX: '0px',
             offsetY: '3px',
             blur: '6px',
@@ -170,19 +179,19 @@
       small: {
         $value: [
           {
-            color: '{base.color.black}',
-            alpha: 0.12,
+            color: '{base.color.gray.7}',
+            alpha: 0.04,
             offsetX: '0px',
-            offsetY: '1px',
-            blur: '3px',
-            spread: '0px',
+            offsetY: '6px',
+            blur: '12px',
+            spread: '-3px',
           },
           {
             color: '{base.color.gray.7}',
             alpha: 0.12,
             offsetX: '0px',
-            offsetY: '8px',
-            blur: '24px',
+            offsetY: '6px',
+            blur: '18px',
             spread: '0px',
           },
         ],
@@ -191,32 +200,32 @@
       medium: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.gray.7}',
+            alpha: 0.08,
             offsetX: '0px',
-            offsetY: '4px',
-            blur: '32px',
+            offsetY: '8px',
+            blur: '16px',
             spread: '-4px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.gray.7}',
+            alpha: 0.08,
             offsetX: '0px',
-            offsetY: '8px',
-            blur: '16px',
+            offsetY: '4px',
+            blur: '32px',
             spread: '-4px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.16,
+            color: '{base.color.gray.7}',
+            alpha: 0.08,
             offsetX: '0px',
             offsetY: '24px',
             blur: '48px',
             spread: '-12px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.24,
+            color: '{base.color.gray.7}',
+            alpha: 0.08,
             offsetX: '0px',
             offsetY: '48px',
             blur: '96px',
@@ -228,11 +237,11 @@
       large: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.2,
+            color: '{base.color.gray.7}',
+            alpha: 0.24,
             offsetX: '0px',
-            offsetY: '8px',
-            blur: '24px',
+            offsetY: '40px',
+            blur: '80px',
             spread: '0px',
           },
         ],
@@ -241,11 +250,11 @@
       xlarge: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.3,
+            color: '{base.color.gray.7}',
+            alpha: 0.24,
             offsetX: '0px',
-            offsetY: '12px',
-            blur: '28px',
+            offsetY: '56px',
+            blur: '112px',
             spread: '0px',
           },
         ],