diff --git a/components/canvas/canvas.tsx b/components/canvas/canvas.tsx
index f003643e0..b5f617b84 100644
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -76,6 +76,7 @@ const MainSVG = styled('svg', {
   height: '100%',
   touchAction: 'none',
   zIndex: 100,
+  backgroundColor: '$canvas',
 
   '& *': {
     userSelect: 'none',
diff --git a/components/panel.tsx b/components/panel.tsx
index ebcca81e4..66cccce22 100644
--- a/components/panel.tsx
+++ b/components/panel.tsx
@@ -5,18 +5,19 @@ export const Root = styled('div', {
   backgroundColor: '$panel',
   borderRadius: '4px',
   overflow: 'hidden',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 25px rgba(0,0,0,.16)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   variants: {
     isOpen: {
       true: {},
       false: {
-        height: 34,
-        width: 34,
+        padding: 2,
+        height: 38,
+        width: 38,
       },
     },
   },
@@ -42,7 +43,7 @@ export const Header = styled('div', {
   width: '100%',
   alignItems: 'center',
   justifyContent: 'space-between',
-  borderBottom: '1px solid $border',
+  padding: 2,
   position: 'relative',
 
   '& h3': {
@@ -91,5 +92,4 @@ export const Footer = styled('div', {
   padding: '0 12px',
   display: 'flex',
   alignItems: 'center',
-  borderTop: '1px solid $border',
 })
diff --git a/components/style-panel/style-panel.tsx b/components/style-panel/style-panel.tsx
index ab5a4e50b..1d0b9d58f 100644
--- a/components/style-panel/style-panel.tsx
+++ b/components/style-panel/style-panel.tsx
@@ -212,13 +212,16 @@ const StylePanelRoot = styled(Panel.Root, {
   maxWidth: 184,
   overflow: 'hidden',
   position: 'relative',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   variants: {
     isOpen: {
       true: {},
       false: {
-        height: 34,
-        width: 34,
+        padding: 2,
+        height: 38,
+        width: 38,
       },
     },
   },
diff --git a/components/tools-panel/tools-panel.tsx b/components/tools-panel/tools-panel.tsx
index 875799c09..d5d8a7a34 100644
--- a/components/tools-panel/tools-panel.tsx
+++ b/components/tools-panel/tools-panel.tsx
@@ -170,12 +170,13 @@ const Container = styled('div', {
   backgroundColor: '$panel',
   borderRadius: '4px',
   overflow: 'hidden',
-  border: '1px solid $border',
+  border: '1px solid $panel',
   pointerEvents: 'all',
   userSelect: 'none',
   height: '100%',
   display: 'flex',
   padding: 4,
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
 
   '& svg': {
     strokeWidth: 0,
diff --git a/components/tools-panel/undo-redo.tsx b/components/tools-panel/undo-redo.tsx
index 71eaf65c5..ee81a1886 100644
--- a/components/tools-panel/undo-redo.tsx
+++ b/components/tools-panel/undo-redo.tsx
@@ -31,11 +31,11 @@ const Container = styled('div', {
   borderRadius: '4px',
   overflow: 'hidden',
   alignSelf: 'flex-end',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
 
diff --git a/components/tools-panel/zoom.tsx b/components/tools-panel/zoom.tsx
index e8aeb4aa7..f339631c0 100644
--- a/components/tools-panel/zoom.tsx
+++ b/components/tools-panel/zoom.tsx
@@ -39,11 +39,11 @@ const Container = styled('div', {
   borderRadius: '4px',
   overflow: 'hidden',
   alignSelf: 'flex-end',
-  border: '1px solid $border',
   pointerEvents: 'all',
   userSelect: 'none',
   zIndex: 200,
-  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
 
diff --git a/styles/stitches.config.ts b/styles/stitches.config.ts
index 4e044b8f8..cb98749c2 100644
--- a/styles/stitches.config.ts
+++ b/styles/stitches.config.ts
@@ -13,6 +13,7 @@ const { styled, global, css, theme, getCssString } = createCss({
       bounds: 'rgba(65, 132, 244, 1.000)',
       boundsBg: 'rgba(65, 132, 244, 0.100)',
       border: '#aaa',
+      canvas: '#fafafa',
       panel: '#fefefe',
       inactive: '#cccccf',
       hover: '#efefef',