diff --git a/site/index.html b/site/index.html
index 99f24c4747..f02d25b777 100644
--- a/site/index.html
+++ b/site/index.html
@@ -56,7 +56,7 @@
   <style>
     html,
     body {
-      background-color: hsl(220, 50%, 3%);
+      background-color: hsl(0, 0%, 1%);
     }
   </style>
 </head>
diff --git a/site/src/theme/colors.ts b/site/src/theme/colors.ts
index f65edb2d17..6c3629812e 100644
--- a/site/src/theme/colors.ts
+++ b/site/src/theme/colors.ts
@@ -4,43 +4,43 @@ export const colors = {
   white: "hsl(0, 0%, 100%)",
 
   gray: {
-    17: "hsl(220, 50%, 3%)",
-    16: "hsl(223, 44%, 9%)",
-    15: "hsl(222, 38%, 14%)",
-    14: "hsl(222, 32%, 19%)",
-    13: "hsl(222, 31%, 25%)",
-    12: "hsl(222, 30%, 31%)",
-    11: "hsl(219, 29%, 38%)",
-    10: "hsl(219, 28%, 45%)",
-    9: "hsl(219, 28%, 52%)",
-    8: "hsl(218, 29%, 58%)",
-    7: "hsl(219, 30%, 64%)",
-    6: "hsl(219, 31%, 71%)",
-    5: "hsl(218, 32%, 77%)",
-    4: "hsl(223, 38%, 84%)",
-    3: "hsl(218, 44%, 92%)",
-    2: "hsl(220, 50%, 95%)",
-    1: "hsl(220, 55%, 98%)",
+    17: "hsl(0, 0%, 1%)",
+    16: "hsl(0, 0%, 4%)",
+    15: "hsl(0, 0%, 7%)",
+    14: "hsl(0, 0%, 11%)",
+    13: "hsl(0, 0%, 15%)",
+    12: "hsl(0, 0%, 19%)",
+    11: "hsl(0, 0%, 23%)",
+    10: "hsl(0, 0%, 27%)",
+    9: "hsl(0, 0%, 31%)",
+    8: "hsl(0, 0%, 35%)",
+    7: "hsl(0, 0%, 62%)",
+    6: "hsl(0, 0%, 69%)",
+    5: "hsl(0, 0%, 75%)",
+    4: "hsl(0, 0%, 82%)",
+    3: "hsl(0, 0%, 90%)",
+    2: "hsl(0, 0%, 93%)",
+    1: "hsl(0, 0%, 96%)",
   },
 
   red: {
     17: "hsl(355, 95%, 3%)",
-    16: "hsl(355, 88%, 9%)",
-    15: "hsl(355, 86%, 14%)",
-    14: "hsl(355, 84%, 19%)",
-    13: "hsl(355, 82%, 25%)",
-    12: "hsl(355, 74%, 31%)",
-    11: "hsl(355, 70%, 38%)",
-    10: "hsl(355, 66%, 45%)",
-    9: "hsl(355, 69%, 52%)",
-    8: "hsl(355, 73%, 58%)",
-    7: "hsl(355, 76%, 64%)",
-    6: "hsl(355, 78%, 71%)",
-    5: "hsl(355, 79%, 77%)",
-    4: "hsl(355, 85%, 84%)",
-    3: "hsl(355, 88%, 92%)",
-    2: "hsl(355, 95%, 96%)",
-    1: "hsl(355, 100%, 98%) ",
+    16: "hsl(355, 88%, 8%)",
+    15: "hsl(355, 86%, 13%)",
+    14: "hsl(355, 84%, 18%)",
+    13: "hsl(355, 82%, 23%)",
+    12: "hsl(355, 74%, 28%)",
+    11: "hsl(355, 70%, 33%)",
+    10: "hsl(355, 66%, 38%)",
+    9: "hsl(355, 69%, 43%)",
+    8: "hsl(355, 73%, 48%)",
+    7: "hsl(355, 76%, 53%)",
+    6: "hsl(355, 78%, 58%)",
+    5: "hsl(355, 79%, 63%)",
+    4: "hsl(355, 85%, 68%)",
+    3: "hsl(355, 88%, 73%)",
+    2: "hsl(355, 95%, 78%)",
+    1: "hsl(355, 100%, 83%) ",
   },
 
   orange: {
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 0c24af51b7..1cb837754c 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -45,8 +45,8 @@ export let dark = createTheme({
     },
     divider: colors.gray[13],
     warning: {
-      light: colors.orange[7],
-      main: colors.orange[9],
+      light: colors.orange[9],
+      main: colors.orange[11],
       dark: colors.orange[15],
     },
     success: {
@@ -167,6 +167,11 @@ dark = createTheme(dark, {
         sizeLarge: {
           height: BUTTON_LG_HEIGHT,
         },
+        outlined: {
+          ":hover": {
+            border: `1px solid ${colors.gray[10]}`,
+          },
+        },
         outlinedNeutral: {
           borderColor: colors.gray[12],
 
@@ -376,7 +381,7 @@ dark = createTheme(dark, {
           // The default outlined input color is white, which seemed jarring.
           "&:hover:not(.Mui-error):not(.Mui-focused) .MuiOutlinedInput-notchedOutline":
             {
-              borderColor: colors.gray[7],
+              borderColor: colors.gray[10],
             },
         },
       },