diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a3df68a8..b804de0c 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -6,6 +6,121 @@ module.exports = {
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
       },
+
+      // XXX Update all styles to use new Tailwind palette, and can then remove
+      // reverting to old palette here.
+      colors: {
+        gray: {
+          100: "#f7fafc",
+          200: "#edf2f7",
+          300: "#e2e8f0",
+          400: "#cbd5e0",
+          500: "#a0aec0",
+          600: "#718096",
+          700: "#4a5568",
+          800: "#2d3748",
+          900: "#1a202c",
+        },
+        red: {
+          100: "#fff5f5",
+          200: "#fed7d7",
+          300: "#feb2b2",
+          400: "#fc8181",
+          500: "#f56565",
+          600: "#e53e3e",
+          700: "#c53030",
+          800: "#9b2c2c",
+          900: "#742a2a",
+        },
+        orange: {
+          100: "#fffaf0",
+          200: "#feebc8",
+          300: "#fbd38d",
+          400: "#f6ad55",
+          500: "#ed8936",
+          600: "#dd6b20",
+          700: "#c05621",
+          800: "#9c4221",
+          900: "#7b341e",
+        },
+        yellow: {
+          100: "#fffff0",
+          200: "#fefcbf",
+          300: "#faf089",
+          400: "#f6e05e",
+          500: "#ecc94b",
+          600: "#d69e2e",
+          700: "#b7791f",
+          800: "#975a16",
+          900: "#744210",
+        },
+        green: {
+          100: "#f0fff4",
+          200: "#c6f6d5",
+          300: "#9ae6b4",
+          400: "#68d391",
+          500: "#48bb78",
+          600: "#38a169",
+          700: "#2f855a",
+          800: "#276749",
+          900: "#22543d",
+        },
+        teal: {
+          100: "#e6fffa",
+          200: "#b2f5ea",
+          300: "#81e6d9",
+          400: "#4fd1c5",
+          500: "#38b2ac",
+          600: "#319795",
+          700: "#2c7a7b",
+          800: "#285e61",
+          900: "#234e52",
+        },
+        blue: {
+          100: "#ebf8ff",
+          200: "#bee3f8",
+          300: "#90cdf4",
+          400: "#63b3ed",
+          500: "#4299e1",
+          600: "#3182ce",
+          700: "#2b6cb0",
+          800: "#2c5282",
+          900: "#2a4365",
+        },
+        indigo: {
+          100: "#ebf4ff",
+          200: "#c3dafe",
+          300: "#a3bffa",
+          400: "#7f9cf5",
+          500: "#667eea",
+          600: "#5a67d8",
+          700: "#4c51bf",
+          800: "#434190",
+          900: "#3c366b",
+        },
+        purple: {
+          100: "#faf5ff",
+          200: "#e9d8fd",
+          300: "#d6bcfa",
+          400: "#b794f4",
+          500: "#9f7aea",
+          600: "#805ad5",
+          700: "#6b46c1",
+          800: "#553c9a",
+          900: "#44337a",
+        },
+        pink: {
+          100: "#fff5f7",
+          200: "#fed7e2",
+          300: "#fbb6ce",
+          400: "#f687b3",
+          500: "#ed64a6",
+          600: "#d53f8c",
+          700: "#b83280",
+          800: "#97266d",
+          900: "#702459",
+        },
+      },
     },
   },
   variants: {