diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index 9c12fca7d7..df5c644033 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -25,6 +25,8 @@ const badgeVariants = cva(
 					"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
 				purple:
 					"border border-solid border-border-purple bg-surface-purple text-highlight-purple shadow",
+				magenta:
+					"border border-solid border-border-magenta bg-surface-magenta text-highlight-magenta shadow",
 				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 4de9539053..c594261c6c 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -29,7 +29,7 @@ export const DisabledBadge: React.FC<React.ComponentPropsWithRef<"div">> = ({
 
 export const EnterpriseBadge: React.FC = () => {
 	return (
-		<Badge variant="info" border="solid">
+		<Badge variant="purple" border="solid">
 			Enterprise
 		</Badge>
 	);
@@ -43,7 +43,7 @@ export const PremiumBadge: React.FC<PremiumBadgeProps> = ({
 	children = "Premium",
 }) => {
 	return (
-		<Badge variant="purple" border="solid">
+		<Badge variant="magenta" border="solid">
 			{children}
 		</Badge>
 	);
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 81842c7942..dee8b558e4 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -13,7 +13,7 @@ export const Paywall = ({
 		<div
 			className={cn(
 				"flex flex-row items-center justify-center min-h-[280px] p-4 rounded-lg gap-8",
-				"border border-solid border-border-purple bg-[linear-gradient(160deg,transparent,hsl(var(--surface-purple)))]",
+				"border border-solid border-border-magenta bg-[linear-gradient(160deg,transparent,hsl(var(--surface-magenta)))]",
 				className,
 			)}
 			{...props}
@@ -101,7 +101,7 @@ export const PaywallSeparator: FC<React.ComponentProps<"hr">> = ({
 	return (
 		<hr
 			className={cn(
-				"w-0 h-[220px] border-0 border-l border-highlight-purple/50 ml-2 mr-0",
+				"w-0 h-[220px] border-0 border-l border-highlight-magenta/50 ml-2 mr-0",
 				className,
 			)}
 			{...props}
@@ -182,10 +182,7 @@ const FeatureIcon: FC<React.ComponentProps<"svg">> = ({
 	return (
 		<CircleCheckBigIcon
 			aria-hidden="true"
-			className="size-icon-sm"
-			css={(theme) => ({
-				color: theme.branding.premium.border,
-			})}
+			className={cn("size-icon-sm text-border-magenta", className)}
 			{...props}
 		/>
 	);
diff --git a/site/src/index.css b/site/src/index.css
index 491ff16be9..a28cf19528 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -18,7 +18,7 @@
 		--content-success: 142 72% 29%;
 		--content-warning: 27 96% 61%;
 		--content-destructive: 0 84% 60%;
-		--surface-primary: 0 0% 98%;
+		--surface-primary: 0 0% 100%;
 		--surface-secondary: 240 5% 96%;
 		--surface-tertiary: 240 6% 90%;
 		--surface-quaternary: 240 5% 84%;
@@ -28,24 +28,27 @@
 		--surface-green: 141 79% 85%;
 		--surface-grey: 240 5% 96%;
 		--surface-orange: 34 100% 92%;
-		--surface-sky: 201 94% 86%;
+		--surface-sky: 191, 67%, 89%;
 		--surface-red: 0 93% 94%;
-		--surface-purple: 251 91% 95%;
+		--surface-purple: 259, 100%, 95%;
+		--surface-magenta: 290, 100%, 95%;
 		--border-purple: 255 92% 76%;
 		--border-default: 240 6% 90%;
 		--border-success: 142 76% 36%;
 		--border-sky: 203 90% 40%;
 		--border-green: 138 82% 82%;
+		--border-magenta: 295, 68%, 46%;
 		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 84% 60%;
 		--border-hover: 240 5% 34%;
 		--overlay-default: 240 5% 84% / 80%;
 		--radius: 0.5rem;
-		--highlight-purple: 262 83% 58%;
+		--highlight-purple: 271, 61%, 35%;
 		--highlight-green: 143 64% 24%;
 		--highlight-grey: 240 5% 65%;
-		--highlight-sky: 201 90% 27%;
+		--highlight-sky: 195, 61%, 22%;
 		--highlight-red: 0 74% 42%;
+		--highlight-magenta: 295, 68%, 46%;
 		--border: 240 5.9% 90%;
 		--input: 240 5.9% 90%;
 		--ring: 240 10% 3.9%;
@@ -54,7 +57,7 @@
 		--avatar-sm: 1.125rem;
 	}
 	.dark {
-		--content-primary: 0 0% 98%;
+		--content-primary: 0 0% 100%;
 		--content-secondary: 240 5% 65%;
 		--content-link: 213 94% 68%;
 		--content-invert: 240 10% 4%;
@@ -72,23 +75,26 @@
 		--surface-green: 145 80% 10%;
 		--surface-grey: 240 6% 10%;
 		--surface-orange: 13 81% 15%;
-		--surface-sky: 204 80% 16%;
+		--surface-sky: 196, 67%, 12%;
 		--surface-red: 0 75% 15%;
-		--surface-purple: 261 73% 23%;
+		--surface-purple: 268, 68%, 17%;
+		--surface-magenta: 291, 74%, 15%;
 		--border-purple: 255 92% 76%;
 		--border-default: 240 4% 16%;
 		--border-success: 142 76% 36%;
+		--border-magenta: 292, 100%, 78%;
 		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 91% 71%;
 		--border-sky: 194 90% 62%;
 		--border-green: 143 77% 87%;
 		--border-hover: 240, 5%, 34%;
 		--overlay-default: 240 10% 4% / 80%;
-		--highlight-purple: 252 95% 85%;
+		--highlight-purple: 269, 100%, 74%;
 		--highlight-green: 141 79% 85%;
 		--highlight-grey: 240 4% 46%;
-		--highlight-sky: 198 93% 60%;
+		--highlight-sky: 188, 75%, 80%;
 		--highlight-red: 0 91% 71%;
+		--highlight-magenta: 292, 100%, 78%;
 		--border: 240 3.7% 15.9%;
 		--input: 240 3.7% 15.9%;
 		--ring: 240 4.9% 83.9%;
diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
index 7b4d52bb7b..dbd97a7ef7 100644
--- a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
+++ b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -11,6 +11,7 @@ import {
 	useRef,
 } from "react";
 import { BODY_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 
 const Language = {
 	seconds: "seconds",
@@ -74,7 +75,7 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
 	return (
 		<div
 			ref={ref}
-			className="font-mono border border-border rounded-lg"
+			className={cn("font-mono border border-border rounded-lg", className)}
 			{...attrs}
 		>
 			{Object.entries(groupedLogsByStage).map(([stage, logs]) => {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 0f21d06348..aa936aeab8 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,4 +1,3 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import type {
@@ -52,7 +51,7 @@ import {
 	Link as RouterLink,
 	unstable_usePrompt as usePrompt,
 } from "react-router";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 import {
 	createFile,
 	existsFile,
@@ -132,7 +131,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 	onActivePathChange,
 }) => {
 	const getLink = useLinks();
-	const theme = useTheme();
 	const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
 	const [fileTree, setFileTree] = useState(defaultFileTree);
 	const [createFileOpen, setCreateFileOpen] = useState(false);
@@ -212,7 +210,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 	return (
 		<>
-			<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
+			<div className="h-full flex flex-col">
 				<Topbar className="grid grid-cols-[1fr_2fr_1fr]" data-testid="topbar">
 					<div>
 						<Tooltip>
@@ -234,32 +232,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 						<RouterLink
 							to={templateLink}
-							css={{
-								color: theme.palette.text.primary,
-								textDecoration: "none",
-
-								"&:hover": {
-									textDecoration: "underline",
-								},
-							}}
+							className="text-content-primary no-underline hover:underline"
 						>
 							{template.display_name || template.name}
 						</RouterLink>
 						<TopbarDivider />
-						<span css={{ color: theme.palette.text.secondary }}>
+						<span className="text-content-secondary">
 							{templateVersion.name}
 						</span>
 					</TopbarData>
 
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "flex-end",
-							gap: 8,
-							paddingRight: 16,
-						}}
-					>
+					<div className="flex items-center justify-end gap-2 pr-4">
 						<span className="mr-2">
 							<Button asChild size="sm" variant="outline">
 								<a
@@ -303,28 +286,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					</div>
 				</Topbar>
 
-				<div
-					css={{
-						display: "flex",
-						flex: 1,
-						flexBasis: 0,
-						overflow: "hidden",
-						position: "relative",
-					}}
-				>
+				<div className="flex flex-1 basis-0 overflow-hidden relative">
 					{publishedVersion && (
 						<div
 							// We need this to reset the dismissable state of the component
 							// when the published version changes
 							key={publishedVersion.id}
-							css={{
-								position: "absolute",
-								width: "100%",
-								display: "flex",
-								justifyContent: "center",
-								padding: 12,
-								zIndex: 10,
-							}}
+							className="absolute w-full flex justify-center p-3 z-10"
 						>
 							<Alert
 								severity="success"
@@ -346,31 +314,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					)}
 
 					<Sidebar>
-						<div
-							css={{
-								height: 42,
-								padding: "0 8px 0 16px",
-								display: "flex",
-								alignItems: "center",
-							}}
-						>
-							<span
-								css={{
-									color: theme.palette.text.primary,
-									fontSize: 13,
-								}}
-							>
-								Files
-							</span>
+						<div className="h-[42px] py-0 pr-2 pl-4 flex items-center">
+							<span className="text-content-primary text-[13px]">Files</span>
 
-							<div
-								css={{
-									marginLeft: "auto",
-									"& svg": {
-										fill: theme.palette.text.primary,
-									},
-								}}
-							>
+							<div className="ml-auto [&_svg]:fill-content-primary">
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<IconButton
@@ -452,51 +399,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 					</Sidebar>
 
-					<div
-						css={{
-							display: "flex",
-							flexDirection: "column",
-							width: "100%",
-							minHeight: "100%",
-							overflow: "hidden",
-						}}
-					>
-						<div css={{ flex: 1, overflowY: "auto" }} data-chromatic="ignore">
+					<div className="flex flex-col w-full min-h-full overflow-hidden">
+						<div className="flex-1 overflow-y-auto" data-chromatic="ignore">
 							{activePath ? (
 								isEditorValueBinary ? (
 									<div
 										role="alert"
-										css={{
-											width: "100%",
-											height: "100%",
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											padding: 40,
-										}}
+										className="w-full h-full flex items-center justify-center p-10"
 									>
-										<div
-											css={{
-												display: "flex",
-												flexDirection: "column",
-												alignItems: "center",
-												maxWidth: 420,
-												textAlign: "center",
-											}}
-										>
-											<TriangleAlertIcon
-												css={{
-													color: theme.roles.warning.fill.outline,
-												}}
-												className="size-icon-lg"
-											/>
-											<p
-												css={{
-													margin: 0,
-													padding: 0,
-													marginTop: 24,
-												}}
-											>
+										<div className="flex flex-col items-center max-w-[420px] text-center">
+											<TriangleAlertIcon className="text-content-warning size-icon-lg" />
+											<p className="m-0 p-0 mt-6">
 												The file is not displayed in the text editor because it
 												is either binary or uses an unsupported text encoding.
 											</p>
@@ -522,40 +435,18 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							)}
 						</div>
 
-						<div
-							css={{
-								borderTop: `1px solid ${theme.palette.divider}`,
-								overflow: "hidden",
-								display: "flex",
-								flexDirection: "column",
-							}}
-						>
+						<div className="border-0 border-t border-solid border-border overflow-hidden flex flex-col">
 							<div
-								css={{
-									display: "flex",
-									alignItems: "center",
-									borderBottom: selectedTab
-										? `1px solid ${theme.palette.divider}`
-										: 0,
-								}}
+								className={cn(
+									"flex items-center",
+									selectedTab && "border-0 border-b border-solid border-border",
+								)}
 							>
-								<div
-									css={{
-										display: "flex",
-
-										"& .MuiTab-root": {
-											padding: 0,
-											fontSize: 14,
-											textTransform: "none",
-											letterSpacing: "unset",
-										},
-									}}
-								>
+								<div className="flex">
 									<button
 										type="button"
 										disabled={!buildLogs}
-										css={styles.tab}
-										className={selectedTab === "logs" ? "active" : ""}
+										className={tabClassName(selectedTab === "logs")}
 										onClick={() => {
 											setSelectedTab("logs");
 										}}
@@ -566,8 +457,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									<button
 										type="button"
 										disabled={!canPublish}
-										css={styles.tab}
-										className={selectedTab === "resources" ? "active" : ""}
+										className={tabClassName(selectedTab === "resources")}
 										onClick={() => {
 											setSelectedTab("resources");
 										}}
@@ -593,15 +483,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 										onClick={() => {
 											setSelectedTab(undefined);
 										}}
-										css={{
-											marginLeft:
-												selectedTab !== "logs" || !gotBuildLogs
-													? "auto"
-													: undefined,
-											width: 36,
-											height: 36,
-											borderRadius: 0,
-										}}
+										className={cn(
+											"w-9 h-9 rounded-none",
+											(selectedTab !== "logs" || !gotBuildLogs) && "ml-auto",
+										)}
 									>
 										<XIcon className="size-icon-xs" />
 									</IconButton>
@@ -609,7 +494,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							</div>
 
 							{selectedTab === "logs" && (
-								<div css={[styles.logs, styles.tabContent]}>
+								<div className="flex flex-col h-[280px] overflow-y-auto">
 									{templateVersion.job.error ? (
 										<div>
 											<ProvisionerAlert
@@ -629,14 +514,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 													tags={templateVersion.job.tags}
 													variant={AlertVariant.Inline}
 												/>
-												<Loader css={{ height: "100%" }} />
+												<Loader className="h-full" />
 											</>
 										)
 									)}
 
 									{gotBuildLogs && (
 										<WorkspaceBuildLogs
-											css={styles.buildLogs}
+											className={cn(
+												"rounded-none border-0",
+												"[&_.logs-header]:border-0 [&_.logs-header]:px-4 [&_.logs-header]:py-2 [&_.logs-header]:font-mono",
+												"[&_.logs-header:first-of-type]:pt-4 [&_.logs-header:last-child]:pb-4",
+												"[&_.logs-line]:pl-4",
+												"[&_.logs-container]:!border-0",
+											)}
 											hideTimestamps
 											logs={buildLogs}
 										/>
@@ -649,7 +540,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							)}
 
 							{selectedTab === "resources" && (
-								<div css={[styles.resources, styles.tabContent]}>
+								<div
+									className={cn(
+										"h-[280px] overflow-y-auto",
+										"[&_.resource-card]:border-l-0 [&_.resource-card]:border-r-0",
+										"[&_.resource-card:first-of-type]:border-t-0 [&_.resource-card:last-child]:border-b-0",
+									)}
+								>
 									{resources && (
 										<TemplateResourcesTable
 											resources={resources.filter(
@@ -716,121 +613,17 @@ const useLeaveSiteWarning = (enabled: boolean) => {
 	});
 };
 
-const styles = {
-	tab: (theme) => ({
-		"&:not(:disabled)": {
-			cursor: "pointer",
-		},
-		padding: 12,
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: "0.5px",
-		fontWeight: 500,
-		background: "transparent",
-		fontFamily: "inherit",
-		border: 0,
-		color: theme.palette.text.secondary,
-		transition: "150ms ease all",
-		display: "flex",
-		gap: 8,
-		alignItems: "center",
-		justifyContent: "center",
-		position: "relative",
-
-		"& svg": {
-			maxWidth: 12,
-			maxHeight: 12,
-		},
-
-		"&.active": {
-			color: theme.palette.text.primary,
-			"&:after": {
-				content: '""',
-				display: "block",
-				width: "100%",
-				height: 1,
-				backgroundColor: theme.palette.primary.main,
-				bottom: -1,
-				position: "absolute",
-			},
-		},
-
-		"&:not(:disabled):hover": {
-			color: theme.palette.text.primary,
-		},
-
-		"&:disabled": {
-			color: theme.palette.text.disabled,
-		},
-	}),
-
-	tabBar: (theme) => ({
-		padding: "8px 16px",
-		position: "sticky",
-		top: 0,
-		background: theme.palette.background.default,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-		color: theme.palette.text.primary,
-		textTransform: "uppercase",
-		fontSize: 12,
-
-		"&.top": {
-			borderTop: `1px solid ${theme.palette.divider}`,
-		},
-	}),
-
-	tabContent: {
-		height: 280,
-		overflowY: "auto",
-	},
-
-	logs: {
-		display: "flex",
-		height: "100%",
-		flexDirection: "column",
-	},
-
-	buildLogs: {
-		borderRadius: 0,
-		border: 0,
-
-		// Hack to update logs header and lines
-		"& .logs-header": {
-			border: 0,
-			padding: "8px 16px",
-			fontFamily: MONOSPACE_FONT_FAMILY,
-
-			"&:first-of-type": {
-				paddingTop: 16,
-			},
-
-			"&:last-child": {
-				paddingBottom: 16,
-			},
-		},
-
-		"& .logs-line": {
-			paddingLeft: 16,
-		},
-
-		"& .logs-container": {
-			border: "0 !important",
-		},
-	},
-
-	resources: {
-		// Hack to access customize resource-card from here
-		"& .resource-card": {
-			borderLeft: 0,
-			borderRight: 0,
-
-			"&:first-of-type": {
-				borderTop: 0,
-			},
-
-			"&:last-child": {
-				borderBottom: 0,
-			},
-		},
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+const tabClassName = (isActive: boolean) =>
+	cn(
+		"p-3 text-[10px] uppercase tracking-[0.5px] font-medium bg-transparent [font-family:inherit] border-0",
+		"text-content-secondary transition-all duration-150",
+		"flex gap-2 items-center justify-center relative",
+		"[&_svg]:max-w-3 [&_svg]:max-h-3",
+		"enabled:cursor-pointer",
+		"hover:enabled:text-content-primary",
+		"disabled:text-content-disabled",
+		isActive && [
+			"text-content-primary",
+			"after:content-[''] after:block after:w-full after:h-px after:bg-surface-invert-primary after:absolute after:-bottom-px",
+		],
+	);
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index ab3247f3ea..fdc9bca4e0 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -55,6 +55,7 @@ module.exports = {
 					sky: "hsl(var(--surface-sky))",
 					red: "hsl(var(--surface-red))",
 					purple: "hsl(var(--surface-purple))",
+					magenta: "hsl(var(--surface-magenta))",
 				},
 				border: {
 					DEFAULT: "hsl(var(--border-default))",
@@ -65,6 +66,7 @@ module.exports = {
 					success: "hsl(var(--border-success))",
 					hover: "hsl(var(--border-hover))",
 					purple: "hsl(var(--border-purple))",
+					magenta: "hsl(var(--border-magenta))",
 				},
 				overlay: "hsla(var(--overlay-default))",
 				input: "hsl(var(--input))",
@@ -75,6 +77,7 @@ module.exports = {
 					grey: "hsl(var(--highlight-grey))",
 					sky: "hsl(var(--highlight-sky))",
 					red: "hsl(var(--highlight-red))",
+					magenta: "hsl(var(--highlight-magenta))",
 				},
 			},
 			keyframes: {