diff --git a/site/src/App/ThemeSetting/ThemedExample.css.ts b/site/src/App/ThemeSetting/ThemedExample.css.ts
index e8db5bd2c81..ba63ffcf4ff 100644
--- a/site/src/App/ThemeSetting/ThemedExample.css.ts
+++ b/site/src/App/ThemeSetting/ThemedExample.css.ts
@@ -1,3 +1,4 @@
+import { palette } from 'braid-src/lib/color/palette';
 import { colorModeStyle } from 'braid-src/entries/css';
 import { createVar, style } from '@vanilla-extract/css';
 import tokens from 'braid-src/lib/themes/docs/tokens';
@@ -6,27 +7,23 @@ export const unthemedBorderRadius = style({
   borderRadius: tokens.border.radius.large,
 });
 
-const bgColor = createVar();
-const cubeColor = createVar();
-const cubeSize = createVar();
+const dotColor = createVar();
+const dotSize = createVar();
+const dotOffset = createVar();
 export const canvas = style([
   {
     vars: {
-      [cubeSize]: '12px',
+      [dotSize]: `${tokens.grid * 2}px`,
+      [dotOffset]: `calc((${dotSize} / 2) * -1)`,
     },
-    backgroundColor: bgColor,
-    backgroundImage: [
-      `linear-gradient(45deg, ${cubeColor} 25%, transparent 25%, transparent 75%, ${cubeColor} 75%, ${cubeColor})`,
-      `linear-gradient(45deg, ${cubeColor} 25%, transparent 25%, transparent 75%, ${cubeColor} 75%, ${cubeColor})`,
-    ].join(', '),
-    backgroundSize: `calc(${cubeSize} * 2) calc(${cubeSize} * 2)`,
-    backgroundPosition: `0 0, ${cubeSize} ${cubeSize}`,
+    backgroundImage: `radial-gradient(${dotColor} 1px, transparent 0)`,
+    backgroundSize: `${dotSize} ${dotSize}`,
+    backgroundPosition: `${dotOffset} ${dotOffset}`,
   },
 ]);
 
 const darkVars = {
-  [cubeColor]: 'rgba(255,255,255, .08)',
-  [bgColor]: tokens.color.background.bodyDark,
+  [dotColor]: palette.grey[800],
 };
 export const explicitDark = style({
   vars: darkVars,
@@ -36,8 +33,7 @@ export const adaptiveCanvas = style(
   colorModeStyle({
     lightMode: {
       vars: {
-        [cubeColor]: 'rgba(0,0,0, .04)',
-        [bgColor]: tokens.color.background.body,
+        [dotColor]: palette.grey[100],
       },
     },
     darkMode: {