diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 43db670850a49..df1d4180fbf9b 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -86,13 +86,19 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
 						theme={themes.dark}
 						onSelect={() => onChangeTheme("dark")}
 					/>
-					<ThemePreviewButton
-						displayName="Light"
-						active={currentTheme === "light"}
-						theme={themes.light}
-						onSelect={() => onChangeTheme("light")}
-					/>
-				</Stack>
+                                        <ThemePreviewButton
+                                                displayName="Light"
+                                                active={currentTheme === "light"}
+                                                theme={themes.light}
+                                                onSelect={() => onChangeTheme("light")}
+                                        />
+                                        <ThemePreviewButton
+                                                displayName="Purple"
+                                                active={currentTheme === "purple"}
+                                                theme={themes.purple}
+                                                onSelect={() => onChangeTheme("purple")}
+                                        />
+                                </Stack>
 			</Section>
 			<div css={{ marginBottom: 48 }}></div>
 			<Section
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index a36bd9b223e8d..cb409222ed9e9 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -3,6 +3,7 @@ import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";
 import dark from "./dark";
+import purple from "./purple";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
@@ -31,8 +32,9 @@ export interface Theme extends Omit<MuiTheme, "palette"> {
 export const DEFAULT_THEME = "dark";
 
 const theme = {
-	dark,
-	light,
+        dark,
+        light,
+        purple,
 } satisfies Record<string, Theme>;
 
 export default theme;
diff --git a/site/src/theme/purple/branding.ts b/site/src/theme/purple/branding.ts
new file mode 100644
index 0000000000000..70dca43edd020
--- /dev/null
+++ b/site/src/theme/purple/branding.ts
@@ -0,0 +1,33 @@
+import type { Branding } from "../branding";
+import colors from "../tailwindColors";
+
+const branding: Branding = {
+	enterprise: {
+		background: colors.blue[950],
+		divider: colors.blue[900],
+		border: colors.blue[400],
+		text: colors.blue[50],
+	},
+	premium: {
+		background: colors.violet[950],
+		divider: colors.violet[900],
+		border: colors.violet[400],
+		text: colors.violet[50],
+	},
+
+       featureStage: {
+               background: colors.violet[950],
+               divider: colors.violet[900],
+               border: colors.violet[400],
+               text: colors.violet[400],
+
+		hover: {
+                       background: colors.zinc[950],
+                       divider: colors.zinc[900],
+                       border: colors.violet[400],
+                       text: colors.violet[400],
+		},
+	},
+};
+
+export default branding;
diff --git a/site/src/theme/purple/experimental.ts b/site/src/theme/purple/experimental.ts
new file mode 100644
index 0000000000000..25074fb0106e0
--- /dev/null
+++ b/site/src/theme/purple/experimental.ts
@@ -0,0 +1,52 @@
+import type { NewTheme } from "../experimental";
+import colors from "../tailwindColors";
+
+export default {
+	l1: {
+		background: colors.zinc[950],
+		outline: colors.zinc[700],
+		text: colors.white,
+		fill: {
+			solid: colors.zinc[600],
+			outline: colors.zinc[600],
+			text: colors.white,
+		},
+	},
+
+	l2: {
+		background: colors.zinc[900],
+		outline: colors.zinc[700],
+		text: colors.zinc[50],
+		fill: {
+			solid: colors.zinc[500],
+			outline: colors.zinc[500],
+			text: colors.white,
+		},
+		disabled: {
+			background: colors.gray[900],
+			outline: colors.zinc[700],
+			text: colors.zinc[200],
+			fill: {
+				solid: colors.zinc[500],
+				outline: colors.zinc[500],
+				text: colors.white,
+			},
+		},
+		hover: {
+			background: colors.zinc[800],
+			outline: colors.zinc[600],
+			text: colors.white,
+			fill: {
+				solid: colors.zinc[400],
+				outline: colors.zinc[400],
+				text: colors.white,
+			},
+		},
+	},
+
+	pillDefault: {
+		background: colors.zinc[800],
+		outline: colors.zinc[700],
+		text: colors.zinc[200],
+	},
+} satisfies NewTheme;
diff --git a/site/src/theme/purple/index.ts b/site/src/theme/purple/index.ts
new file mode 100644
index 0000000000000..29cec249232c6
--- /dev/null
+++ b/site/src/theme/purple/index.ts
@@ -0,0 +1,15 @@
+import { forDarkThemes } from "../externalImages";
+import branding from "./branding";
+import experimental from "./experimental";
+import monaco from "./monaco";
+import muiTheme from "./mui";
+import roles from "./roles";
+
+export default {
+	...muiTheme,
+	externalImages: forDarkThemes,
+	experimental,
+	branding,
+	monaco,
+	roles,
+};
diff --git a/site/src/theme/purple/monaco.ts b/site/src/theme/purple/monaco.ts
new file mode 100644
index 0000000000000..4c73d8b9918e8
--- /dev/null
+++ b/site/src/theme/purple/monaco.ts
@@ -0,0 +1,37 @@
+import type * as monaco from "monaco-editor";
+import muiTheme from "./mui";
+
+export default {
+	base: "vs-dark",
+	inherit: true,
+	rules: [
+		{
+			token: "comment",
+			foreground: "6B737C",
+		},
+		{
+			token: "type",
+			foreground: "B392F0",
+		},
+		{
+			token: "string",
+			foreground: "9DB1C5",
+		},
+		{
+			token: "variable",
+			foreground: "DDDDDD",
+		},
+		{
+			token: "identifier",
+			foreground: "B392F0",
+		},
+		{
+			token: "delimiter.curly",
+			foreground: "EBB325",
+		},
+	],
+	colors: {
+		"editor.foreground": muiTheme.palette.text.primary,
+		"editor.background": muiTheme.palette.background.paper,
+	},
+} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;
diff --git a/site/src/theme/purple/mui.ts b/site/src/theme/purple/mui.ts
new file mode 100644
index 0000000000000..e372f0e74c433
--- /dev/null
+++ b/site/src/theme/purple/mui.ts
@@ -0,0 +1,79 @@
+// biome-ignore lint/nursery/noRestrictedImports: createTheme
+import { createTheme } from "@mui/material/styles";
+import { BODY_FONT_FAMILY, borderRadius } from "../constants";
+import { components } from "../mui";
+import tw from "../tailwindColors";
+
+const muiTheme = createTheme({
+	palette: {
+		mode: "dark",
+                primary: {
+                        main: tw.violet[500],
+                        contrastText: tw.white,
+                        light: tw.violet[400],
+                        dark: tw.violet[600],
+                },
+		secondary: {
+			main: tw.zinc[500],
+			contrastText: tw.zinc[200],
+			dark: tw.zinc[400],
+		},
+		background: {
+			default: tw.zinc[950],
+			paper: tw.zinc[900],
+		},
+		text: {
+			primary: tw.zinc[50],
+			secondary: tw.zinc[400],
+			disabled: tw.zinc[500],
+		},
+		divider: tw.zinc[700],
+		warning: {
+			light: tw.amber[500],
+			main: tw.amber[800],
+			dark: tw.amber[950],
+		},
+		success: {
+			main: tw.green[500],
+			dark: tw.green[600],
+		},
+		info: {
+			light: tw.blue[400],
+			main: tw.blue[600],
+			dark: tw.blue[950],
+			contrastText: tw.zinc[200],
+		},
+		error: {
+			light: tw.red[400],
+			main: tw.red[500],
+			dark: tw.red[950],
+			contrastText: tw.zinc[200],
+		},
+		action: {
+			hover: tw.zinc[800],
+		},
+		neutral: {
+			main: tw.zinc[50],
+		},
+		dots: tw.zinc[500],
+	},
+	typography: {
+		fontFamily: BODY_FONT_FAMILY,
+
+		body1: {
+			fontSize: "1rem" /* 16px at default scaling */,
+			lineHeight: "160%",
+		},
+
+		body2: {
+			fontSize: "0.875rem" /* 14px at default scaling */,
+			lineHeight: "160%",
+		},
+	},
+	shape: {
+		borderRadius,
+	},
+	components,
+});
+
+export default muiTheme;
diff --git a/site/src/theme/purple/roles.ts b/site/src/theme/purple/roles.ts
new file mode 100644
index 0000000000000..2cdf801e40e11
--- /dev/null
+++ b/site/src/theme/purple/roles.ts
@@ -0,0 +1,157 @@
+import type { Roles } from "../roles";
+import colors from "../tailwindColors";
+
+const roles: Roles = {
+	danger: {
+		background: colors.orange[950],
+		outline: colors.orange[500],
+		text: colors.orange[50],
+		fill: {
+			solid: colors.orange[500],
+			outline: colors.orange[400],
+			text: colors.white,
+		},
+		disabled: {
+			background: colors.orange[950],
+			outline: colors.orange[800],
+			text: colors.orange[200],
+			fill: {
+				solid: colors.orange[800],
+				outline: colors.orange[800],
+				text: colors.white,
+			},
+		},
+		hover: {
+			background: colors.orange[900],
+			outline: colors.orange[500],
+			text: colors.white,
+			fill: {
+				solid: colors.orange[500],
+				outline: colors.orange[500],
+				text: colors.white,
+			},
+		},
+	},
+	error: {
+		background: colors.red[950],
+		outline: colors.red[600],
+		text: colors.red[50],
+		fill: {
+			solid: colors.red[400],
+			outline: colors.red[400],
+			text: colors.white,
+		},
+	},
+	warning: {
+		background: colors.amber[950],
+		outline: colors.amber[300],
+		text: colors.amber[50],
+		fill: {
+			solid: colors.amber[500],
+			outline: colors.amber[500],
+			text: colors.white,
+		},
+	},
+	notice: {
+		background: colors.blue[950],
+		outline: colors.blue[400],
+		text: colors.blue[50],
+		fill: {
+			solid: colors.blue[500],
+			outline: colors.blue[600],
+			text: colors.white,
+		},
+	},
+	info: {
+		background: colors.zinc[950],
+		outline: colors.zinc[400],
+		text: colors.zinc[50],
+		fill: {
+			solid: colors.zinc[500],
+			outline: colors.zinc[600],
+			text: colors.white,
+		},
+	},
+	success: {
+		background: colors.green[950],
+		outline: colors.green[500],
+		text: colors.green[50],
+		fill: {
+			solid: colors.green[600],
+			outline: colors.green[600],
+			text: colors.white,
+		},
+		disabled: {
+			background: colors.green[950],
+			outline: colors.green[800],
+			text: colors.green[200],
+			fill: {
+				solid: colors.green[800],
+				outline: colors.green[800],
+				text: colors.white,
+			},
+		},
+		hover: {
+			background: colors.green[900],
+			outline: colors.green[500],
+			text: colors.white,
+			fill: {
+				solid: colors.green[500],
+				outline: colors.green[500],
+				text: colors.white,
+			},
+		},
+	},
+       active: {
+               background: colors.violet[950],
+               outline: colors.violet[500],
+               text: colors.violet[50],
+               fill: {
+                       solid: colors.violet[600],
+                       outline: colors.violet[400],
+                       text: colors.white,
+               },
+               disabled: {
+                       background: colors.violet[950],
+                       outline: colors.violet[800],
+                       text: colors.violet[200],
+                       fill: {
+                               solid: colors.violet[800],
+                               outline: colors.violet[800],
+                               text: colors.white,
+                       },
+               },
+               hover: {
+                       background: colors.violet[900],
+                       outline: colors.violet[500],
+                       text: colors.white,
+                       fill: {
+                               solid: colors.violet[500],
+                               outline: colors.violet[500],
+                               text: colors.white,
+                       },
+               },
+	},
+	inactive: {
+		background: colors.zinc[950],
+		outline: colors.zinc[500],
+		text: colors.zinc[50],
+		fill: {
+			solid: colors.zinc[400],
+			outline: colors.zinc[400],
+			text: colors.white,
+		},
+	},
+	preview: {
+		background: colors.violet[950],
+		outline: colors.violet[500],
+		text: colors.violet[50],
+		fill: {
+			solid: colors.violet[400],
+			outline: colors.violet[400],
+			text: colors.white,
+		},
+	},
+};
+
+export default roles;