From ca6e6213bf3886da14a88c4a4f49d70d58643e2e Mon Sep 17 00:00:00 2001
From: Kayla Washburn <mckayla@hey.com>
Date: Mon, 6 Nov 2023 11:43:06 -0500
Subject: [PATCH] chore: use px values instead of `theme.spacing` and
 `theme.shape.borderRadius` (#10519)

---
 site/src/components/Avatar/Avatar.tsx         | 30 +++++-----
 site/src/components/AvatarData/AvatarData.tsx |  2 +-
 .../components/CodeExample/CodeExample.tsx    |  6 +-
 site/src/components/CopyButton/CopyButton.tsx | 14 +----
 .../components/Dashboard/DashboardLayout.tsx  |  2 +-
 .../DeploymentBanner/DeploymentBannerView.tsx | 57 ++++++++++---------
 .../LicenseBanner/LicenseBannerView.tsx       | 14 ++---
 .../Dashboard/Navbar/NavbarView.tsx           | 23 ++++----
 .../Navbar/UserDropdown/UserDropdown.tsx      |  8 +--
 .../UserDropdown/UserDropdownContent.tsx      | 10 ++--
 .../ServiceBanner/ServiceBannerView.tsx       |  2 +-
 .../DeploySettingsLayout/Badges.tsx           | 10 ++--
 .../DeploySettingsLayout.tsx                  |  6 +-
 .../DeploySettingsLayout/Fieldset.tsx         | 19 +++----
 .../DeploySettingsLayout/Header.tsx           |  6 +-
 .../DeploySettingsLayout/Option.tsx           | 24 +++-----
 .../DeploySettingsLayout/OptionsTable.tsx     |  8 +--
 .../DeploySettingsLayout/Sidebar.tsx          | 18 ++----
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   | 12 ++--
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     |  2 +-
 .../DropdownArrow/DropdownArrow.tsx           |  2 +-
 site/src/components/EmptyState/EmptyState.tsx | 27 ++-------
 .../ErrorBoundary/RuntimeErrorState.tsx       | 47 ++++++++-------
 site/src/components/Expander/Expander.tsx     |  6 +-
 site/src/components/FileUpload/FileUpload.tsx | 22 +++----
 site/src/components/Form/Form.tsx             | 24 ++++----
 site/src/components/FormFooter/FormFooter.tsx |  8 +--
 .../components/FullPageForm/FullPageForm.tsx  |  5 +-
 .../GlobalSnackbar/EnterpriseSnackbar.tsx     |  4 +-
 .../GlobalSnackbar/GlobalSnackbar.tsx         |  8 +--
 .../components/HelpTooltip/HelpTooltip.tsx    | 30 +++++-----
 site/src/components/IconField/IconField.tsx   |  4 +-
 site/src/components/Markdown/Markdown.tsx     | 18 +++---
 site/src/components/MoreMenu/MoreMenu.tsx     |  4 +-
 .../PageHeader/FullWidthPageHeader.tsx        |  4 +-
 site/src/components/PageHeader/PageHeader.tsx | 16 +++---
 .../PaginationWidget/PageButton.tsx           |  2 +-
 .../PaginationWidget/PaginationWidgetBase.tsx |  2 +-
 site/src/components/Paywall/Paywall.tsx       | 16 +++---
 site/src/components/Pill/Pill.tsx             | 19 +++----
 site/src/components/Popover/Popover.tsx       |  8 +--
 .../src/components/Resources/AgentLatency.tsx |  6 +-
 .../components/Resources/AgentMetadata.tsx    | 18 +++---
 site/src/components/Resources/AgentRow.tsx    | 30 +++++-----
 .../components/Resources/AgentRowPreview.tsx  | 12 ++--
 site/src/components/Resources/AgentStatus.tsx | 16 +++---
 .../components/Resources/AppLink/AppLink.tsx  |  2 +-
 .../Resources/AppLink/AppPreviewLink.tsx      |  2 +-
 .../Resources/PortForwardButton.stories.tsx   |  2 +-
 .../Resources/PortForwardButton.tsx           | 49 +++++++---------
 .../src/components/Resources/ResourceCard.tsx | 18 +++---
 site/src/components/Resources/Resources.tsx   |  6 +-
 .../Resources/SSHButton/SSHButton.tsx         | 12 ++--
 .../components/Resources/SensitiveValue.tsx   | 10 ++--
 .../RichParameterInput/MultiTextField.tsx     | 12 ++--
 .../RichParameterInput/RichParameterInput.tsx | 41 +++++++------
 .../src/components/SettingsLayout/Section.tsx | 13 ++---
 .../SettingsLayout/SectionAction.tsx          | 10 +---
 .../SettingsLayout/SettingsLayout.tsx         | 15 +----
 .../src/components/SettingsLayout/Sidebar.tsx | 19 ++-----
 site/src/components/Sidebar/Sidebar.tsx       | 10 ++--
 .../components/SignInLayout/SignInLayout.tsx  |  2 +-
 site/src/components/Stack/Stack.tsx           |  6 +-
 site/src/components/Stats/Stats.tsx           | 20 +++----
 .../SyntaxHighlighter/SyntaxHighlighter.tsx   |  2 +-
 .../components/TableLoader/TableLoader.tsx    | 11 +---
 .../components/TableToolbar/TableToolbar.tsx  |  8 ++-
 site/src/components/Tabs/Tabs.tsx             | 10 ++--
 .../TemplateExampleCard.tsx                   | 26 ++++-----
 .../TemplateFiles/TemplateFiles.tsx           | 10 ++--
 .../components/Timeline/TimelineDateRow.tsx   |  2 +-
 .../UserAutocomplete/UserAutocomplete.tsx     |  8 +--
 site/src/components/Welcome/Welcome.tsx       |  8 +--
 .../components/WorkspaceBuildLogs/Logs.tsx    | 28 ++++-----
 .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx |  2 +-
 .../WorkspaceStatusBadge.tsx                  |  2 +-
 site/src/hooks/useClickableTableRow.ts        |  4 +-
 site/src/pages/404Page/404Page.tsx            |  4 +-
 .../AuditLogRow/AuditLogDiff/AuditLogDiff.tsx | 24 ++++----
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     |  6 +-
 .../src/pages/CliAuthPage/CliAuthPageView.tsx |  4 +-
 .../CreateTemplatePage/CreateTemplateForm.tsx | 14 ++---
 .../CreateTemplatePage/VariableInput.tsx      |  2 +-
 .../pages/CreateTokenPage/CreateTokenPage.tsx |  6 +-
 .../CreateWorkspacePageView.tsx               | 12 ++--
 .../CreateWorkspacePage/SelectedTemplate.tsx  |  4 +-
 .../AppearanceSettingsPageView.tsx            |  4 +-
 .../ExternalAuthSettingsPageView.tsx          | 14 ++---
 .../GeneralSettingsPage/ChartSection.tsx      | 11 +---
 .../AddNewLicensePageView.tsx                 |  5 +-
 .../LicensesSettingsPage/DividerWithText.tsx  |  8 +--
 .../LicensesSettingsPage/LicenseCard.tsx      |  8 +--
 .../LicensesSettingsPageView.tsx              | 16 +++---
 .../ExternalAuthPage/ExternalAuthPageView.tsx | 24 ++++----
 site/src/pages/GroupsPage/GroupsPageView.tsx  |  2 +-
 site/src/pages/HealthPage/HealthPage.tsx      | 12 ++--
 site/src/pages/IconsPage/IconsPage.tsx        |  8 +--
 site/src/pages/LoginPage/LoginPageView.tsx    | 20 +++----
 site/src/pages/LoginPage/OAuthSignInForm.tsx  |  7 +--
 site/src/pages/LoginPage/SignInForm.tsx       | 32 +++++------
 site/src/pages/SetupPage/SetupPageView.tsx    | 17 ++----
 .../StarterTemplatePageView.tsx               |  8 +--
 .../StarterTemplatesPageView.tsx              | 12 ++--
 .../TemplateDocsPage/TemplateDocsPage.tsx     |  6 +-
 .../TemplateInsightsPage.tsx                  | 32 +++++------
 .../src/pages/TemplatePage/TemplateLayout.tsx |  4 +-
 .../TemplateVersionsPage/VersionRow.tsx       |  6 +-
 .../pages/TemplateSettingsPage/Sidebar.tsx    | 18 +++---
 .../TemplateSettingsForm.tsx                  |  4 +-
 .../TemplatePermissionsPageView.tsx           | 18 +++---
 .../TemplateSchedulePage/ScheduleDialog.tsx   | 12 ++--
 .../TemplateSettingsLayout.tsx                |  6 +-
 .../TemplateVariablesPageView.tsx             |  2 +-
 .../FileTreeView.tsx                          |  4 +-
 .../MissingTemplateVariablesDialog.tsx        | 27 +++++----
 .../TemplateVersionEditor.tsx                 | 14 ++---
 .../pages/TemplatesPage/EmptyTemplates.tsx    | 14 ++---
 site/src/pages/TerminalPage/TerminalPage.tsx  |  6 +-
 .../SecurityPage/SingleSignOnSection.tsx      |  4 +-
 .../TokensPage/TokensPage.tsx                 |  8 +--
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx  |  4 +-
 .../pages/UsersPage/ResetPasswordDialog.tsx   |  5 +-
 .../UsersPage/UsersTable/EditRolesButton.tsx  | 28 ++++-----
 .../UsersPage/UsersTable/UserGroupsCell.tsx   |  6 +-
 .../UsersPage/UsersTable/UserRoleCell.tsx     |  6 +-
 .../WorkspaceBuildPageView.tsx                |  6 +-
 site/src/pages/WorkspacePage/BuildRow.tsx     |  6 +-
 .../WorkspacePage/ChangeVersionDialog.tsx     | 11 +---
 .../UpdateBuildParametersDialog.tsx           | 27 +++++----
 site/src/pages/WorkspacePage/Workspace.tsx    |  6 +-
 .../BuildParametersPopover.tsx                |  2 +-
 .../WorkspaceActions/WorkspaceActions.tsx     |  6 +-
 .../WorkspaceBuildLogsSection.tsx             |  2 +-
 .../WorkspacePage/WorkspaceBuildProgress.tsx  | 14 ++---
 .../pages/WorkspacePage/WorkspaceStats.tsx    | 49 ++++++++--------
 .../pages/WorkspaceSettingsPage/Sidebar.tsx   | 19 ++-----
 .../WorkspaceParametersPage.tsx               |  2 +-
 .../WorkspaceScheduleForm.tsx                 | 13 ++---
 .../WorkspaceSettingsLayout.tsx               |  8 +--
 site/src/pages/WorkspacesPage/LastUsed.tsx    |  6 +-
 .../pages/WorkspacesPage/WorkspacesButton.tsx | 15 +++--
 .../pages/WorkspacesPage/WorkspacesEmpty.tsx  | 12 ++--
 .../pages/WorkspacesPage/WorkspacesTable.tsx  |  7 +--
 site/src/theme/theme.ts                       |  2 +-
 144 files changed, 774 insertions(+), 958 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 89de1f174b..5fe92aae2d 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
 };
 
 const sizeStyles = {
-  xs: (theme) => ({
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-    fontSize: theme.spacing(1),
+  xs: {
+    width: 16,
+    height: 16,
+    fontSize: 8,
     fontWeight: 700,
-  }),
-  sm: (theme) => ({
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(1.5),
+  },
+  sm: {
+    width: 24,
+    height: 24,
+    fontSize: 12,
     fontWeight: 600,
-  }),
+  },
   md: {},
-  xl: (theme) => ({
-    width: theme.spacing(6),
-    height: theme.spacing(6),
-    fontSize: theme.spacing(3),
-  }),
+  xl: {
+    width: 48,
+    height: 48,
+    fontSize: 24,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 const colorStyles = {
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
index ba5d7db14d..2f8b59a30a 100644
--- a/site/src/components/AvatarData/AvatarData.tsx
+++ b/site/src/components/AvatarData/AvatarData.tsx
@@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
       direction="row"
       alignItems="center"
       css={{
-        minHeight: theme.spacing(5), // Make it predictable for the skeleton
+        minHeight: 40, // Make it predictable for the skeleton
         width: "100%",
         lineHeight: "150%",
       }}
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index aaf5aca643..7f6dfc62ce 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -26,8 +26,8 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
         color: theme.palette.primary.contrastText,
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 14,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(1),
+        borderRadius: 8,
+        padding: 8,
         lineHeight: "150%",
         border: `1px solid ${theme.palette.divider}`,
       }}
@@ -35,7 +35,7 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
     >
       <code
         css={{
-          padding: theme.spacing(0, 1),
+          padding: "0 8px",
           width: "100%",
           display: "flex",
           alignItems: "center",
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
index ca5ca9b7d4..1fc2e19c86 100644
--- a/site/src/components/CopyButton/CopyButton.tsx
+++ b/site/src/components/CopyButton/CopyButton.tsx
@@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
         <IconButton
           className={buttonClassName}
           css={(theme) => css`
-            border-radius: ${theme.shape.borderRadius}px;
-            padding: ${theme.spacing(0.85)};
+            border-radius: 8px;
+            padding: 8px;
             min-width: 32px;
 
             &:hover {
@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
           ) : (
             <FileCopyIcon css={fileCopyIconStyles} />
           )}
-          {ctaCopy && (
-            <div
-              css={(theme) => ({
-                marginLeft: theme.spacing(1),
-              })}
-            >
-              {ctaCopy}
-            </div>
-          )}
+          {ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
         </IconButton>
       </div>
     </Tooltip>
diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
index 1947e3ef9c..e06888c6b3 100644
--- a/site/src/components/Dashboard/DashboardLayout.tsx
+++ b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
             sx: (theme) => ({
               background: theme.palette.background.paper,
               color: theme.palette.text.primary,
-              maxWidth: theme.spacing(55),
+              maxWidth: 440,
               flexDirection: "row",
               borderColor: theme.palette.info.light,
 
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index fe742c9b9c..847761dced 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -46,18 +46,18 @@ const styles = {
     align-items: center;
   `,
   category: (theme) => ({
-    marginRight: theme.spacing(2),
+    marginRight: 16,
     color: theme.palette.text.primary,
   }),
   values: (theme) => ({
     display: "flex",
-    gap: theme.spacing(1),
+    gap: 8,
     color: theme.palette.text.secondary,
   }),
-  value: (theme) => css`
+  value: css`
     display: flex;
     align-items: center;
-    gap: ${theme.spacing(0.5)};
+    gap: 4px;
 
     & svg {
       width: 12px;
@@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     align-items: center;
     justify-content: center;
     background-color: ${unhealthy ? colors.red[10] : undefined};
-    padding: ${theme.spacing(0, 1.5)};
+    padding: 0 12px;
     height: ${bannerHeight}px;
     color: #fff;
 
@@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
   const statusSummaryStyle = className`
     ${theme.typography.body2 as CSSObject}
 
-    margin: ${theme.spacing(0, 0, 0.5, 1.5)};
-    width: ${theme.spacing(50)};
-    padding: ${theme.spacing(2)};
+    margin: 0 0 4px 12px;
+    width: 400px;
+    padding: 16px;
     color: ${theme.palette.text.primary};
     background-color: ${theme.palette.background.paper};
     border: 1px solid ${theme.palette.divider};
@@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
         height: bannerHeight,
         bottom: 0,
         zIndex: 1,
-        paddingRight: theme.spacing(2),
+        paddingRight: 16,
         backgroundColor: theme.palette.background.paper,
         display: "flex",
         alignItems: "center",
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 12,
-        gap: theme.spacing(4),
+        gap: 32,
         borderTop: `1px solid ${theme.palette.divider}`,
         overflowX: "auto",
         whiteSpace: "nowrap",
@@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
           )
         }
         open={process.env.STORYBOOK === "true" ? true : undefined}
-        css={{ marginRight: theme.spacing(-2) }}
+        css={{ marginRight: -16 }}
       >
         {unhealthy ? (
           <Link component={RouterLink} to="/health" css={statusBadgeStyle}>
@@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
           marginLeft: "auto",
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(2),
+          gap: 16,
         }}
       >
         <Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
@@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
 
         <Tooltip title="A countdown until stats are fetched again. Click to refresh!">
           <Button
-            css={css`
-              ${styles.value(theme)}
+            css={[
+              styles.value,
+              css`
+                margin: 0;
+                padding: 0 8px;
+                height: unset;
+                min-height: unset;
+                font-size: unset;
+                color: unset;
+                border: 0;
+                min-width: unset;
+                font-family: inherit;
 
-              margin: 0;
-              padding: 0 8px;
-              height: unset;
-              min-height: unset;
-              font-size: unset;
-              color: unset;
-              border: 0;
-              min-width: unset;
-              font-family: inherit;
-
-              & svg {
-                margin-right: ${theme.spacing(0.5)};
-              }
-            `}
+                & svg {
+                  margin-right: 4px;
+                }
+              `,
+            ]}
             onClick={() => {
               if (fetchStats) {
                 fetchStats();
diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
index ed1975902b..78e9c0b37e 100644
--- a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -21,10 +21,10 @@ export const Language = {
 };
 
 const styles = {
-  leftContent: (theme) => ({
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-  }),
+  leftContent: {
+    marginRight: 8,
+    marginLeft: 8,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface LicenseBannerViewProps {
@@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
 
     display: flex;
     align-items: center;
-    padding: ${theme.spacing(1.5)};
+    padding: 12px;
     background-color: ${type === "error"
       ? colors.red[12]
       : theme.palette.warning.main};
@@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
           </Link>
         </div>
         <Expander expanded={showDetails} setExpanded={setShowDetails}>
-          <ul css={{ padding: theme.spacing(1), margin: 0 }}>
+          <ul css={{ padding: 8, margin: 0 }}>
             {messages.map((message) => (
-              <li css={{ margin: theme.spacing(0.5) }} key={message}>
+              <li css={{ margin: 4 }} key={message}>
                 {message}
               </li>
             ))}
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
index ba3735a1b0..372b685564 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -70,17 +70,17 @@ const styles = {
       justify-content: flex-start;
     }
   `,
-  drawerHeader: (theme) => ({
-    padding: theme.spacing(2),
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  }),
+  drawerHeader: {
+    padding: 16,
+    paddingTop: 32,
+    paddingBottom: 32,
+  },
   logo: (theme) => css`
     align-items: center;
     display: flex;
     height: ${navHeight}px;
     color: ${theme.palette.text.primary};
-    padding: ${theme.spacing(2)};
+    padding: 16px;
 
     // svg is for the Coder logo, img is for custom images
     & svg,
@@ -89,10 +89,10 @@ const styles = {
       object-fit: contain;
     }
   `,
-  drawerLogo: (theme) => ({
+  drawerLogo: {
     padding: 0,
-    maxHeight: theme.spacing(5),
-  }),
+    maxHeight: 40,
+  },
   item: {
     padding: 0,
   },
@@ -102,7 +102,7 @@ const styles = {
     display: flex;
     flex: 1;
     font-size: 16px;
-    padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
+    padding: 12px 16px;
     text-decoration: none;
     transition: background-color 0.15s ease-in-out;
 
@@ -117,7 +117,7 @@ const styles = {
 
     ${theme.breakpoints.up("md")} {
       height: ${navHeight}px;
-      padding: 0 ${theme.spacing(3)};
+      padding: 0 24px;
     }
   `,
 } satisfies Record<string, Interpolation<Theme>>;
@@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
     </nav>
   );
 };
+
 export const NavbarView: FC<NavbarViewProps> = ({
   user,
   logo_url,
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
index 3c65c3c034..48b1503cde 100644
--- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
+++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -1,7 +1,7 @@
 import Badge from "@mui/material/Badge";
-import { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import { colors } from "theme/colors";
-import * as TypesGen from "api/typesGenerated";
+import type * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
@@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
         <>
           <PopoverTrigger>
             <button
-              css={(theme) => css`
+              css={css`
                 background: none;
                 border: 0;
                 cursor: pointer;
                 height: ${navHeight}px;
-                padding: ${theme.spacing(1.5, 0)};
+                padding: 12px 0;
 
                 &:hover {
                   background-color: transparent;
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
index 99d2d65a48..af3ca9061e 100644
--- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
+++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -28,7 +28,7 @@ const styles = {
   info: (theme) => [
     theme.typography.body2 as CSSObject,
     {
-      padding: theme.spacing(2.5),
+      padding: 20,
     },
   ],
   userName: {
@@ -45,8 +45,8 @@ const styles = {
     color: "inherit",
   },
   menuItem: (theme) => css`
-    gap: ${theme.spacing(2.5)};
-    padding: ${theme.spacing(1, 2.5)};
+    gap: 20px;
+    padding: 8px 20px;
 
     &:hover {
       background-color: ${theme.palette.action.hover};
@@ -55,8 +55,8 @@ const styles = {
   `,
   menuItemIcon: (theme) => ({
     color: theme.palette.text.secondary,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    width: 20,
+    height: 20,
   }),
   menuItemText: {
     fontSize: 14,
diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
index 526613cd1f..b79c6e5929 100644
--- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
+++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
@@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
   return (
     <div
       css={css`
-        padding: ${theme.spacing(1.5)};
+        padding: 12px;
         background-color: ${backgroundColor ?? theme.palette.warning.main};
         display: flex;
         align-items: center;
diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
index dfef954018..aa5ca7941d 100644
--- a/site/src/components/DeploySettingsLayout/Badges.tsx
+++ b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -5,19 +5,19 @@ import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 
 const styles = {
-  badge: (theme) => ({
+  badge: {
     fontSize: 10,
     height: 24,
     fontWeight: 600,
     textTransform: "uppercase",
     letterSpacing: "0.085em",
-    padding: theme.spacing(0, 1.5),
+    padding: "0 12px",
     borderRadius: 9999,
     display: "flex",
     alignItems: "center",
     width: "fit-content",
     whiteSpace: "nowrap",
-  }),
+  },
 
   enabledBadge: (theme) => ({
     border: `1px solid ${theme.palette.success.light}`,
@@ -125,9 +125,7 @@ export const AlphaBadge: FC = () => {
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
   return (
     <Stack
-      css={(theme) => ({
-        margin: theme.spacing(0, 0, 2),
-      })}
+      css={{ margin: "0 0 16px" }}
       direction="row"
       alignItems="center"
       spacing={1}
diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
index 3999156784..e862a72c25 100644
--- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
+++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -35,11 +35,7 @@ export const DeploySettingsLayout: FC = () => {
   return (
     <RequirePermission isFeatureVisible={permissions.viewDeploymentValues}>
       <Margins>
-        <Stack
-          css={(theme) => ({ padding: theme.spacing(6, 0) })}
-          direction="row"
-          spacing={6}
-        >
+        <Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
           <Sidebar />
           <main css={{ maxWidth: 800, width: "100%" }}>
             {deploymentConfigQuery.data ? (
diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
index 627db642ee..9100b3e307 100644
--- a/site/src/components/DeploySettingsLayout/Fieldset.tsx
+++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -27,17 +27,17 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
   return (
     <form
       css={{
-        borderRadius: theme.spacing(1),
+        borderRadius: 8,
         border: `1px solid ${theme.palette.divider}`,
         background: theme.palette.background.paper,
-        marginTop: theme.spacing(4),
+        marginTop: 32,
       }}
       onSubmit={onSubmit}
     >
-      <header css={{ padding: theme.spacing(3) }}>
+      <header css={{ padding: 24 }}>
         <div
           css={{
-            fontSize: theme.spacing(2.5),
+            fontSize: 20,
             margin: 0,
             fontWeight: 600,
           }}
@@ -49,18 +49,13 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
             css={{
               color: theme.palette.text.secondary,
               fontSize: 14,
-              marginTop: theme.spacing(1),
+              marginTop: 8,
             }}
           >
             {subtitle}
           </div>
         )}
-        <div
-          css={[
-            theme.typography.body2 as CSSObject,
-            { paddingTop: theme.spacing(2) },
-          ]}
-        >
+        <div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
           {children}
         </div>
       </header>
@@ -69,7 +64,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
           theme.typography.body2 as CSSObject,
           {
             background: theme.palette.background.paperLight,
-            padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+            padding: "16px 24px",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
index cc12d1a269..8be28d1e0d 100644
--- a/site/src/components/DeploySettingsLayout/Header.tsx
+++ b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -14,7 +14,7 @@ export const Header: FC<{
 
   return (
     <Stack alignItems="baseline" direction="row" justifyContent="space-between">
-      <div css={{ maxWidth: 420, marginBottom: theme.spacing(3) }}>
+      <div css={{ maxWidth: 420, marginBottom: 24 }}>
         <h1
           css={[
             {
@@ -24,8 +24,8 @@ export const Header: FC<{
               alignItems: "center",
               lineHeight: "initial",
               margin: 0,
-              marginBottom: theme.spacing(0.5),
-              gap: theme.spacing(1),
+              marginBottom: 4,
+              gap: 8,
             },
             secondary && {
               fontSize: 24,
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index e8c51eac1e..153d71e7bd 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -30,7 +30,7 @@ export const OptionDescription: FC<PropsWithChildren> = (props) => {
         display: "block",
         color: theme.palette.text.secondary,
         fontSize: 14,
-        marginTop: theme.spacing(0.5),
+        marginTop: 4,
       }}
     >
       {children}
@@ -53,18 +53,10 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
     user-select: all;
 
     & ul {
-      padding: ${theme.spacing(2)};
+      padding: 16px;
     }
   `;
 
-  const listStyles = css`
-    margin: 0,
-    padding: 0,
-    display: "flex",
-    flex-direction: "column",
-    gap: theme.spacing(0.5),
-  `;
-
   if (typeof value === "boolean") {
     return value ? <EnabledBadge /> : <DisabledBadge />;
   }
@@ -83,7 +75,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
   if (typeof value === "object" && !Array.isArray(value)) {
     return (
-      <ul css={listStyles && { listStyle: "none" }}>
+      <ul css={{ listStyle: "none" }}>
         {Object.entries(value)
           .sort((a, b) => a[0].localeCompare(b[0]))
           .map(([option, isEnabled]) => (
@@ -109,7 +101,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
                       width: 16,
                       height: 16,
                       color: (theme) => theme.palette.success.light,
-                      margin: (theme) => theme.spacing(0, 1),
+                      margin: "0 8px",
                     }}
                   />
                 )}
@@ -123,7 +115,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
   if (Array.isArray(value)) {
     return (
-      <ul css={listStyles && { listStylePosition: "inside" }}>
+      <ul css={{ listStylePosition: "inside" }}>
         {value.map((item) => (
           <li key={item} css={optionStyles}>
             {item}
@@ -162,7 +154,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
         display: "inline-flex",
         alignItems: "center",
         borderRadius: 0.25,
-        padding: (theme) => theme.spacing(0, 1),
+        padding: "0 8px",
         border: `1px solid ${borderColor}`,
         ...sx,
       }}
@@ -183,12 +175,12 @@ export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
       sx={{
         fontSize: 10,
         fontWeight: 600,
-        margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
+        margin: "0 6px 0 -4px",
         display: "block",
         backgroundColor: (theme) =>
           source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
         lineHeight: 1,
-        padding: (theme) => theme.spacing(0.25, 0.5),
+        padding: "2px 4px",
         borderRadius: 0.25,
         ...sx,
       }}
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index a8920c2edd..c36f97b9b5 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -28,15 +28,15 @@ const OptionsTable: FC<{
   return (
     <TableContainer>
       <Table
-        css={(theme) => css`
+        css={css`
           & td {
-            padding-top: ${theme.spacing(3)};
-            padding-bottom: ${theme.spacing(3)};
+            padding-top: 24px;
+            padding-bottom: 24px;
           }
 
           & td:last-child,
           & th:last-child {
-            padding-left: ${theme.spacing(4)};
+            padding-left: 32px;
           }
         `}
       >
diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
index e13b0c68ab..a8683b0cc9 100644
--- a/site/src/components/DeploySettingsLayout/Sidebar.tsx
+++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -32,8 +32,8 @@ const SidebarNavItem: FC<
       left: 0;
       top: 0;
       background-color: ${theme.palette.secondary.dark};
-      border-top-left-radius: ${theme.shape.borderRadius};
-      border-bottom-left-radius: ${theme.shape.borderRadius};
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
     }
   `;
 
@@ -47,8 +47,8 @@ const SidebarNavItem: FC<
         display: block;
         font-size: 14px;
         text-decoration: none;
-        padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
-        border-radius: ${theme.shape.borderRadius / 2}px;
+        padding: 12px 12px 12px 16px;
+        border-radius: 4px;
         transition: background-color 0.15s ease-in-out;
         margin-bottom: 1;
         position: relative;
@@ -67,15 +67,7 @@ const SidebarNavItem: FC<
 };
 
 const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
-  const theme = useTheme();
-  return (
-    <Icon
-      css={{
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-      }}
-    />
-  );
+  return <Icon css={{ width: 16, height: 16 }} />;
 };
 
 export const Sidebar: React.FC = () => {
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 8ba40f079b..be2f1ee55c 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -58,22 +58,22 @@ const styles = {
       background: theme.palette.background.paper,
       border: `1px solid ${theme.palette.divider}`,
       width: "100%",
-      maxWidth: theme.spacing(55),
+      maxWidth: 440,
     },
     "& .MuiDialogActions-spacing": {
-      padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
+      padding: "0 40px 40px",
     },
   }),
   dialogContent: (theme) => ({
     color: theme.palette.text.secondary,
-    padding: theme.spacing(5),
+    padding: 40,
   }),
   dialogTitle: (theme) => ({
     margin: 0,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
     color: theme.palette.text.primary,
     fontWeight: 400,
-    fontSize: theme.spacing(2.5),
+    fontSize: 20,
   }),
   dialogDescription: (theme) => ({
     color: theme.palette.text.secondary,
@@ -89,7 +89,7 @@ const styles = {
     },
 
     "& > p": {
-      margin: theme.spacing(1, 0),
+      margin: "8px 0",
     },
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index ab1134bb6a..9593c0f969 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -75,7 +75,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
             <TextField
               fullWidth
               autoFocus
-              sx={{ marginTop: theme.spacing(3) }}
+              css={{ marginTop: 24 }}
               name="confirmation"
               autoComplete="off"
               id={`${hookId}-confirm`}
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
index 1e769692cc..69b8d677e1 100644
--- a/site/src/components/DropdownArrow/DropdownArrow.tsx
+++ b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -19,7 +19,7 @@ export const DropdownArrow: FC<ArrowProps> = (props) => {
       aria-label={close ? "close-dropdown" : "open-dropdown"}
       css={(theme: Theme) => ({
         color: color ?? theme.palette.primary.contrastText,
-        marginLeft: margin ? theme.spacing(1) : 0,
+        marginLeft: margin ? 8 : 0,
         width: 16,
         height: 16,
       })}
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
index 3d605b3334..d1d702b35e 100644
--- a/site/src/components/EmptyState/EmptyState.tsx
+++ b/site/src/components/EmptyState/EmptyState.tsx
@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { FC, ReactNode } from "react";
-import { useTheme } from "@emotion/react";
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
@@ -25,7 +24,6 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
   props,
 ) => {
   const { message, description, cta, image, ...boxProps } = props;
-  const theme = useTheme();
 
   return (
     <Box
@@ -37,17 +35,12 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
         alignItems: "center",
         textAlign: "center",
         minHeight: 360,
-        padding: theme.spacing(10, 5),
+        padding: "80px 40px",
         position: "relative",
       }}
       {...boxProps}
     >
-      <Typography
-        variant="h5"
-        css={{
-          fontSize: theme.spacing(3),
-        }}
-      >
+      <Typography variant="h5" css={{ fontSize: 24 }}>
         {message}
       </Typography>
       {description && (
@@ -55,24 +48,16 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
           variant="body2"
           color="textSecondary"
           css={{
-            marginTop: theme.spacing(1.5),
-            fontSize: theme.spacing(2),
+            marginTop: 12,
+            fontSize: 16,
             lineHeight: "140%",
-            maxWidth: theme.spacing(60),
+            maxWidth: 480,
           }}
         >
           {description}
         </Typography>
       )}
-      {cta && (
-        <div
-          css={{
-            marginTop: theme.spacing(4),
-          }}
-        >
-          {cta}
-        </div>
-      )}
+      {cta && <div css={{ marginTop: 32 }}>{cta}</div>}
       {image}
     </Box>
   );
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
index 0b6ecdd893..5563cacb2d 100644
--- a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
+++ b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
@@ -4,7 +4,7 @@ import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { css } from "@emotion/css";
-import { useTheme, type Interpolation, type Theme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { CoderIcon } from "components/Icons/CoderIcon";
@@ -18,7 +18,6 @@ const fetchDynamicallyImportedModuleError =
 export type RuntimeErrorStateProps = { error: Error };
 
 export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
-  const theme = useTheme();
   const [checkingError, setCheckingError] = useState(true);
   const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
   const coderVersion = staticBuildInfo?.version;
@@ -102,10 +101,10 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
                       background-color: transparent;
                       border: 0;
                       border-radius: 999px;
-                      min-height: ${theme.spacing(4)};
-                      min-width: ${theme.spacing(4)};
-                      height: ${theme.spacing(4)};
-                      width: ${theme.spacing(4)};
+                      min-height: 32px;
+                      min-width: 32px;
+                      height: 32px;
+                      width: 32px;
 
                       & svg {
                         width: 16px;
@@ -147,38 +146,38 @@ const getStaticBuildInfo = () => {
 };
 
 const styles = {
-  root: (theme) => ({
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
+  root: {
+    paddingTop: 32,
+    paddingBottom: 32,
     textAlign: "center",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100%",
-    maxWidth: theme.spacing(75),
-  }),
+    maxWidth: 600,
+  },
 
-  logo: (theme) => ({
-    fontSize: theme.spacing(8),
-  }),
+  logo: {
+    fontSize: 64,
+  },
 
-  title: (theme) => ({
-    fontSize: theme.spacing(4),
+  title: {
+    fontSize: 32,
     fontWeight: 400,
-  }),
+  },
 
   text: (theme) => ({
     fontSize: 16,
     color: theme.palette.text.secondary,
     lineHeight: "160%",
-    marginBottom: theme.spacing(4),
+    marginBottom: 32,
   }),
 
   stack: (theme) => ({
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
-    marginTop: theme.spacing(8),
+    marginTop: 64,
     display: "block",
     textAlign: "left",
   }),
@@ -188,7 +187,7 @@ const styles = {
     textTransform: "uppercase",
     fontWeight: 600,
     letterSpacing: 1,
-    padding: theme.spacing(1, 1, 1, 2),
+    padding: "8px 8px 8px 16px",
     backgroundColor: theme.palette.background.paperLight,
     borderBottom: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.secondary,
@@ -198,15 +197,15 @@ const styles = {
     alignItems: "center",
   }),
 
-  stackCode: (theme) => ({
-    padding: theme.spacing(2),
+  stackCode: {
+    padding: 16,
     margin: 0,
     wordWrap: "break-word",
     whiteSpace: "break-spaces",
-  }),
+  },
 
   version: (theme) => ({
-    marginTop: theme.spacing(4),
+    marginTop: 32,
     fontSize: 12,
     color: theme.palette.text.secondary,
   }),
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index c736f73168..7ca21ab1b0 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -49,9 +49,9 @@ const styles = {
     cursor: "pointer",
     color: theme.palette.text.secondary,
   }),
-  collapseLink: (theme) => ({
-    marginTop: theme.spacing(2),
-  }),
+  collapseLink: {
+    marginTop: 16,
+  },
   text: (theme) => ({
     display: "flex",
     alignItems: "center",
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index 0416f2c182..c8d29220ad 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -133,9 +133,9 @@ const styles = {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: ${theme.shape.borderRadius}px;
+    border-radius: 8px;
     border: 2px dashed ${theme.palette.divider};
-    padding: ${theme.spacing(6)};
+    padding: 48px;
     cursor: pointer;
 
     &:hover {
@@ -148,18 +148,18 @@ const styles = {
     opacity: 0.75,
   },
 
-  icon: (theme) => ({
-    fontSize: theme.spacing(8),
-  }),
+  icon: {
+    fontSize: 64,
+  },
 
-  title: (theme) => ({
-    fontSize: theme.spacing(2),
-  }),
+  title: {
+    fontSize: 16,
+  },
 
   description: (theme) => ({
     color: theme.palette.text.secondary,
     textAlign: "center",
-    maxWidth: theme.spacing(50),
+    maxWidth: 400,
   }),
 
   input: {
@@ -167,9 +167,9 @@ const styles = {
   },
 
   file: (theme) => ({
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
+    padding: 16,
     background: theme.palette.background.paper,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index 92356b38ec..c0e88ad473 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -34,10 +34,10 @@ export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
         css={{
           display: "flex",
           flexDirection: "column",
-          gap: theme.spacing(direction === "horizontal" ? 10 : 5),
+          gap: direction === "horizontal" ? 80 : 40,
 
           [theme.breakpoints.down("md")]: {
-            gap: theme.spacing(8),
+            gap: 64,
           },
         }}
       />
@@ -88,11 +88,11 @@ export const FormSection: FC<
         display: "flex",
         alignItems: "flex-start",
         flexDirection: direction === "horizontal" ? "row" : "column",
-        gap: theme.spacing(direction === "horizontal" ? 15 : 3),
+        gap: direction === "horizontal" ? 120 : 24,
 
         [theme.breakpoints.down("md")]: {
           flexDirection: "column",
-          gap: theme.spacing(2),
+          gap: 16,
         },
       }}
       className={classes.root}
@@ -103,7 +103,7 @@ export const FormSection: FC<
           maxWidth: direction === "horizontal" ? 312 : undefined,
           flexShrink: 0,
           position: direction === "horizontal" ? "sticky" : undefined,
-          top: theme.spacing(3),
+          top: 24,
 
           [theme.breakpoints.down("md")]: {
             width: "100%",
@@ -144,15 +144,15 @@ const styles = {
     color: theme.palette.text.primary,
     fontWeight: 400,
     margin: 0,
-    marginBottom: theme.spacing(1),
+    marginBottom: 8,
   }),
 
-  formSectionInfoTitleAlpha: (theme) => ({
+  formSectionInfoTitleAlpha: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing(1.5),
-  }),
+    gap: 12,
+  },
 
   formSectionInfoDescription: (theme) => ({
     fontSize: 14,
@@ -172,7 +172,7 @@ export const FormFooter = (props: Exclude<FormFooterProps, "styles">) => (
 
 const footerStyles = {
   button: (theme) => ({
-    minWidth: theme.spacing(23),
+    minWidth: 184,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
@@ -184,11 +184,11 @@ const footerStyles = {
     alignItems: "center",
     justifyContent: "flex-start",
     flexDirection: "row-reverse",
-    gap: theme.spacing(2),
+    gap: 16,
 
     [theme.breakpoints.down("md")]: {
       flexDirection: "column",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 } satisfies FormFooterStyles;
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
index 17d1a81d51..fe669ca5ef 100644
--- a/site/src/components/FormFooter/FormFooter.tsx
+++ b/site/src/components/FormFooter/FormFooter.tsx
@@ -57,16 +57,16 @@ export const FormFooter: FC<FormFooterProps> = ({
 };
 
 const defaultStyles = {
-  footer: (theme) => ({
+  footer: {
     display: "flex",
     flex: "0",
     // The first button is the submit so it is the first element to be focused
     // on tab so we use row-reverse to display it on the right
     flexDirection: "row-reverse",
-    gap: theme.spacing(1.5),
+    gap: 12,
     alignItems: "center",
-    marginTop: theme.spacing(3),
-  }),
+    marginTop: 24,
+  },
   button: {
     width: "100%",
   },
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
index 9e8163dcee..f3f521c101 100644
--- a/site/src/components/FullPageForm/FullPageForm.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -5,7 +5,6 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader";
-import { useTheme } from "@emotion/react";
 
 export interface FullPageFormProps {
   title: string;
@@ -17,11 +16,9 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
   detail,
   children,
 }) => {
-  const theme = useTheme();
-
   return (
     <Margins size="small">
-      <PageHeader css={{ paddingBottom: theme.spacing(3) }}>
+      <PageHeader css={{ paddingBottom: 24 }}>
         <PageHeaderTitle>{title}</PageHeaderTitle>
         {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
       </PageHeader>
diff --git a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
index b39edb1209..8580b705d3 100644
--- a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
@@ -35,8 +35,8 @@ export const EnterpriseSnackbar: FC<
   const snackbarContentStyles = css`
     border: 1px solid ${theme.palette.divider};
     border-left: 4px solid ${variantColor(variant, theme)};
-    border-radius: ${theme.shape.borderRadius}px;
-    padding: ${theme.spacing(1, 3, 1, 2)};
+    border-radius: 8px;
+    padding: 8px 24px 8px 16px;
     box-shadow: ${theme.shadows[6]};
     align-items: inherit;
     background-color: ${theme.palette.background.paper};
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index d521812316..56d5fa1e86 100644
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -125,11 +125,11 @@ const styles = {
     fontSize: 14,
     fontWeight: 600,
   },
-  messageSubtitle: (theme) => ({
-    marginTop: theme.spacing(1.5),
-  }),
+  messageSubtitle: {
+    marginTop: 12,
+  },
   errorIcon: (theme) => ({
     color: theme.palette.error.contrastText,
-    marginRight: theme.spacing(2),
+    marginRight: 16,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index b79babde64..ca9647e8be 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -59,9 +59,9 @@ export const HelpPopover: FC<
         paper: className`
           ${theme.typography.body2 as CSSObject}
 
-          margin-top: ${theme.spacing(0.5)};
-          width: ${theme.spacing(38)};
-          padding: ${theme.spacing(2.5)};
+          margin-top: 4px;
+          width: 304px;
+          padding: 20px;
           color: ${theme.palette.text.secondary};
           pointer-events: auto;
         `,
@@ -239,7 +239,7 @@ const getIconSpacingFromSize = (size?: Size): number => {
 const styles = {
   title: (theme) => ({
     marginTop: 0,
-    marginBottom: theme.spacing(1),
+    marginBottom: 8,
     color: theme.palette.text.primary,
     fontSize: 14,
     lineHeight: "150%",
@@ -247,8 +247,8 @@ const styles = {
   }),
 
   text: (theme) => ({
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
+    marginTop: 4,
+    marginBottom: 4,
     ...(theme.typography.body2 as CSSObject),
   }),
 
@@ -258,16 +258,16 @@ const styles = {
     ...(theme.typography.body2 as CSSObject),
   }),
 
-  linkIcon: (theme) => ({
+  linkIcon: {
     color: "inherit",
     width: 14,
     height: 14,
-    marginRight: theme.spacing(1),
-  }),
+    marginRight: 8,
+  },
 
-  linksGroup: (theme) => ({
-    marginTop: theme.spacing(2),
-  }),
+  linksGroup: {
+    marginTop: 16,
+  },
 
   action: (theme) => ({
     display: "flex",
@@ -280,10 +280,10 @@ const styles = {
     fontSize: 14,
   }),
 
-  actionIcon: (theme) => ({
+  actionIcon: {
     color: "inherit",
     width: 14,
     height: 14,
-    marginRight: theme.spacing(1),
-  }),
+    marginRight: 8,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index c1e26fe4ac..77f6e45a71 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -62,8 +62,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
             <InputAdornment
               position="end"
               css={{
-                width: theme.spacing(3),
-                height: theme.spacing(3),
+                width: 24,
+                height: 24,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index 5391e96517..97f840ce6b 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -66,7 +66,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
           ) : (
             <code
               css={(theme) => ({
-                padding: theme.spacing(0.125, 0.5),
+                padding: "1px 4px",
                 background: theme.palette.divider,
                 borderRadius: 4,
                 color: theme.palette.text.primary,
@@ -120,14 +120,14 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   lineHeight: "24px",
 
   "& h1, & h2, & h3, & h4, & h5, & h6": {
-    marginTop: theme.spacing(4),
-    marginBottom: theme.spacing(2),
+    marginTop: 32,
+    marginBottom: 16,
     lineHeight: "1.25",
   },
 
   "& p": {
     marginTop: 0,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   },
 
   "& p:only-child": {
@@ -138,12 +138,12 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   "& ul, & ol": {
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(1),
-    marginBottom: theme.spacing(2),
+    gap: 8,
+    marginBottom: 16,
   },
 
   "& li > ul, & li > ol": {
-    marginTop: theme.spacing(2),
+    marginTop: 16,
   },
 
   "& li > p": {
@@ -152,8 +152,8 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
 
   "& .prismjs": {
     background: theme.palette.background.paperLight,
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(2, 3),
+    borderRadius: 8,
+    padding: "16px 24px",
     overflowX: "auto",
 
     "& code": {
diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
index fbececc20f..b1af6c2caa 100644
--- a/site/src/components/MoreMenu/MoreMenu.tsx
+++ b/site/src/components/MoreMenu/MoreMenu.tsx
@@ -93,8 +93,8 @@ export const MoreMenuItem = (
         fontSize: 14,
         color: danger ? theme.palette.error.light : undefined,
         "& .MuiSvgIcon-root": {
-          width: theme.spacing(2),
-          height: theme.spacing(2),
+          width: 16,
+          height: 16,
         },
       })}
       onClick={(e) => {
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
index c81be232be..8b2f23973c 100644
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -11,12 +11,12 @@ export const FullWidthPageHeader: FC<
       css={[
         {
           ...(theme.typography.body2 as CSSObject),
-          padding: theme.spacing(3),
+          padding: 24,
           background: theme.palette.background.paper,
           borderBottom: `1px solid ${theme.palette.divider}`,
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(6),
+          gap: 48,
 
           zIndex: 10,
           flexWrap: "wrap",
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index f963560958..0baf192d7a 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -17,9 +17,9 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
       css={(theme) => ({
         display: "flex",
         alignItems: "center",
-        paddingTop: theme.spacing(6),
-        paddingBottom: theme.spacing(6),
-        gap: theme.spacing(4),
+        paddingTop: 48,
+        paddingBottom: 48,
+        gap: 32,
 
         [theme.breakpoints.down("md")]: {
           flexDirection: "column",
@@ -53,14 +53,14 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
 }) => {
   return (
     <h1
-      css={(theme) => ({
-        fontSize: theme.spacing(3),
+      css={{
+        fontSize: 24,
         fontWeight: 400,
         margin: 0,
         display: "flex",
         alignItems: "center",
         lineHeight: "140%",
-      })}
+      }}
     >
       {children}
     </h1>
@@ -73,12 +73,12 @@ export const PageHeaderSubtitle: FC<
   return (
     <h2
       css={(theme) => ({
-        fontSize: theme.spacing(2),
+        fontSize: 16,
         color: theme.palette.text.secondary,
         fontWeight: 400,
         display: "block",
         margin: 0,
-        marginTop: condensed ? theme.spacing(0.5) : theme.spacing(1),
+        marginTop: condensed ? 4 : 8,
         lineHeight: "140%",
       })}
     >
diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx
index 7a8f304b15..9b89486359 100644
--- a/site/src/components/PaginationWidget/PageButton.tsx
+++ b/site/src/components/PaginationWidget/PageButton.tsx
@@ -24,7 +24,7 @@ export const PageButton = ({
       css={[
         css`
           &:not(:last-of-type) {
-            margin-right: ${theme.spacing(0.5)};
+            margin-right: 4px;
           }
         `,
         activePage === page && {
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
index 779dc1ec9d..f72e9632ff 100644
--- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -41,7 +41,7 @@ export const PaginationWidgetBase = ({
     >
       <Button
         css={{
-          marginRight: theme.spacing(0.5),
+          marginRight: 4,
         }}
         aria-label="Previous page"
         disabled={isFirstPage}
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 29ffb2e169..14533bf112 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -52,24 +52,24 @@ const styles = {
     alignItems: "center",
     textAlign: "center",
     minHeight: 300,
-    padding: theme.spacing(3),
+    padding: 24,
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-  }),
-  header: (theme) => ({
-    marginBottom: theme.spacing(3),
+    borderRadius: 8,
   }),
+  header: {
+    marginBottom: 24,
+  },
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
   },
-  description: (theme) => ({
-    marginTop: theme.spacing(1),
+  description: {
+    marginTop: 8,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  }),
+  },
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index b250c0318b..036206d1f5 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,5 +1,5 @@
 import { type FC, type ReactNode, useMemo, forwardRef } from "react";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 import { colors } from "theme/colors";
 
 export type PillType =
@@ -53,7 +53,6 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
       type = "neutral",
       ...attrs
     } = props;
-    const theme = useTheme();
 
     const typeStyles = useMemo(() => {
       if (type in themeOverrides) {
@@ -75,9 +74,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
             borderRadius: 99999,
             fontSize: 12,
             color: "#FFF",
-            height: theme.spacing(3),
-            paddingLeft: icon ? theme.spacing(0.75) : theme.spacing(1.5),
-            paddingRight: theme.spacing(1.5),
+            height: 24,
+            paddingLeft: icon ? 6 : 12,
+            paddingRight: 12,
             whiteSpace: "nowrap",
             fontWeight: 400,
           },
@@ -89,9 +88,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
         {icon && (
           <div
             css={css`
-              margin-right: ${theme.spacing(0.5)};
-              width: ${theme.spacing(1.75)};
-              height: ${theme.spacing(1.75)};
+              margin-right: 4px;
+              width: 14px;
+              height: 14px;
               line-height: 0;
               display: flex;
               align-items: center;
@@ -99,8 +98,8 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
 
               & > img,
               & > svg {
-                width: ${theme.spacing(1.75)};
-                height: ${theme.spacing(1.75)};
+                width: 14px;
+                height: 14px;
               }
             `}
           >
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 5a936ac21a..bab14ff805 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -128,19 +128,19 @@ export const PopoverContent = (
   return (
     <MuiPopover
       disablePortal
-      css={(theme) => ({
+      css={{
         // When it is on hover mode, and the mode is moving from the trigger to
         // the popover, if there is any space, the popover will be closed. I
         // found this is a limitation on how MUI structured the component. It is
         // not a big issue for now but we can re-evaluate it in the future.
-        marginTop: hoverMode ? undefined : theme.spacing(1),
+        marginTop: hoverMode ? undefined : 8,
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {
-          minWidth: theme.spacing(40),
+          minWidth: 320,
           fontSize: 14,
           pointerEvents: hoverMode ? "auto" : undefined,
         },
-      })}
+      }}
       {...horizontalProps(horizontal)}
       {...modeProps(popover)}
       {...props}
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index a611f6ba70..a6ee1757f6 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -65,11 +65,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
           first row is the preferred relay.
         </HelpTooltipText>
         <HelpTooltipText>
-          <Stack
-            direction="column"
-            spacing={1}
-            css={{ marginTop: theme.spacing(2) }}
-          >
+          <Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
             {Object.entries(agent.latency)
               .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
               .map(([regionName, region]) => (
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 2ad3bb79eb..32636eae63 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -205,26 +205,26 @@ const StaticWidth = (props: BoxProps) => {
 // site/src/components/Resources/ResourceCard.tsx
 const styles = {
   root: (theme) => ({
-    padding: theme.spacing(2.5, 4),
+    padding: "20px 32px",
     borderTop: `1px solid ${theme.palette.divider}`,
     background: theme.palette.background.paper,
     overflowX: "auto",
-    scrollPadding: theme.spacing(0, 4),
+    scrollPadding: "0 32px",
   }),
 
-  metadata: (theme) => ({
+  metadata: {
     fontSize: 12,
     lineHeight: "normal",
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(0.5),
+    gap: 4,
     overflow: "visible",
 
     // Because of scrolling
     "&:last-child": {
-      paddingRight: theme.spacing(4),
+      paddingRight: 32,
     },
-  }),
+  },
 
   metadataLabel: (theme) => ({
     color: theme.palette.text.secondary,
@@ -255,9 +255,9 @@ const styles = {
     cursor: "pointer",
   }),
 
-  skeleton: (theme) => ({
-    marginTop: theme.spacing(0.5),
-  }),
+  skeleton: {
+    marginTop: 4,
+  },
 
   inlineCommand: (theme) => ({
     fontFamily: MONOSPACE_FONT_FAMILY,
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 8808be86c1..ea63b1105d 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -563,31 +563,31 @@ const styles = {
   }),
 
   agentInfo: (theme) => ({
-    padding: theme.spacing(2, 4),
+    padding: "16px 32px",
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(6),
+    gap: 48,
     flexWrap: "wrap",
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(2),
+      gap: 16,
     },
   }),
 
   agentNameAndInfo: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(3),
+    gap: 24,
     flexWrap: "wrap",
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(1.5),
+      gap: 12,
     },
   }),
 
   agentButtons: (theme) => ({
     display: "flex",
-    gap: theme.spacing(1),
+    gap: 8,
     justifyContent: "flex-end",
     flexWrap: "wrap",
     flex: 1,
@@ -607,7 +607,7 @@ const styles = {
     maxHeight: 256,
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
-    paddingTop: theme.spacing(2),
+    paddingTop: 16,
 
     // We need this to be able to apply the padding top from startupLogs
     "& > div": {
@@ -618,7 +618,7 @@ const styles = {
   agentNameAndStatus: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(4),
+    gap: 32,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
@@ -631,7 +631,7 @@ const styles = {
     textOverflow: "ellipsis",
     maxWidth: 260,
     fontWeight: 600,
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     flexShrink: 0,
     width: "fit-content",
 
@@ -640,11 +640,11 @@ const styles = {
     },
   }),
 
-  agentDataGroup: (theme) => ({
+  agentDataGroup: {
     display: "flex",
     alignItems: "baseline",
-    gap: theme.spacing(6),
-  }),
+    gap: 48,
+  },
 
   agentData: (theme) => ({
     display: "flex",
@@ -670,12 +670,12 @@ const styles = {
     background: "transparent",
     border: 0,
     fontFamily: "inherit",
-    padding: theme.spacing(1.5, 4),
+    padding: "12px 32px",
     color: theme.palette.text.secondary,
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1),
+    gap: 8,
     whiteSpace: "nowrap",
 
     "&:hover": {
@@ -699,7 +699,7 @@ const styles = {
   agentErrorMessage: (theme) => ({
     fontSize: 12,
     fontWeight: 400,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
     color: theme.palette.warning.light,
   }),
 
diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx
index ada9c1c485..ab553b4240 100644
--- a/site/src/components/Resources/AgentRowPreview.tsx
+++ b/site/src/components/Resources/AgentRowPreview.tsx
@@ -102,7 +102,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
 
 const styles = {
   agentRow: (theme) => ({
-    padding: theme.spacing(2, 4),
+    padding: "16px 32px",
     backgroundColor: theme.palette.background.paperLight,
     fontSize: 16,
     position: "relative",
@@ -122,12 +122,12 @@ const styles = {
     },
   }),
 
-  agentStatusWrapper: (theme) => ({
-    width: theme.spacing(4.5),
+  agentStatusWrapper: {
+    width: 36,
     display: "flex",
     justifyContent: "center",
     flexShrink: 0,
-  }),
+  },
 
   agentStatusPreview: (theme) => ({
     width: 10,
@@ -153,7 +153,7 @@ const styles = {
     color: theme.palette.text.secondary,
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(2),
+      gap: 16,
       flexWrap: "wrap",
     },
   }),
@@ -170,7 +170,7 @@ const styles = {
     [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
       width: "fit-content",
     },
   }),
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index 966239e669..12280f8406 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -353,12 +353,12 @@ export const AgentStatus: React.FC<{
 };
 
 const styles = {
-  status: (theme) => ({
-    width: theme.spacing(1),
-    height: theme.spacing(1),
+  status: {
+    width: 8,
+    height: 8,
     borderRadius: "100%",
     flexShrink: 0,
-  }),
+  },
 
   connected: (theme) => ({
     backgroundColor: theme.palette.success.light,
@@ -388,15 +388,15 @@ const styles = {
 
   timeoutWarning: (theme) => ({
     color: theme.palette.warning.light,
-    width: theme.spacing(2),
-    height: theme.spacing(2),
+    width: 16,
+    height: 16,
     position: "relative",
   }),
 
   errorWarning: (theme) => ({
     color: theme.palette.error.main,
-    width: theme.spacing(2),
-    height: theme.spacing(2),
+    width: 16,
+    height: 16,
     position: "relative",
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Resources/AppLink/AppLink.tsx b/site/src/components/Resources/AppLink/AppLink.tsx
index c8d177a4c8..8f83648495 100644
--- a/site/src/components/Resources/AppLink/AppLink.tsx
+++ b/site/src/components/Resources/AppLink/AppLink.tsx
@@ -94,7 +94,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
       <span
         css={
           !isPrivateApp && {
-            marginRight: theme.spacing(1),
+            marginRight: 8,
           }
         }
       >
diff --git a/site/src/components/Resources/AppLink/AppPreviewLink.tsx b/site/src/components/Resources/AppLink/AppPreviewLink.tsx
index 3d78601562..0a30788aab 100644
--- a/site/src/components/Resources/AppLink/AppPreviewLink.tsx
+++ b/site/src/components/Resources/AppLink/AppPreviewLink.tsx
@@ -12,7 +12,7 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
   return (
     <Stack
       css={(theme) => ({
-        padding: theme.spacing(0.25, 1.5),
+        padding: "2px 12px",
         borderRadius: 9999,
         border: `1px solid ${theme.palette.divider}`,
         color: theme.palette.text.primary,
diff --git a/site/src/components/Resources/PortForwardButton.stories.tsx b/site/src/components/Resources/PortForwardButton.stories.tsx
index b77c5275d2..910ab65909 100644
--- a/site/src/components/Resources/PortForwardButton.stories.tsx
+++ b/site/src/components/Resources/PortForwardButton.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof PortForwardPopoverView> = {
     (Story) => (
       <Box
         sx={{
-          width: (theme) => theme.spacing(38),
+          width: 304,
           border: (theme) => `1px solid ${theme.palette.divider}`,
           borderRadius: 1,
           backgroundColor: (theme) => theme.palette.background.paper,
diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
index 83f54aeebb..df4f6b773f 100644
--- a/site/src/components/Resources/PortForwardButton.tsx
+++ b/site/src/components/Resources/PortForwardButton.tsx
@@ -54,7 +54,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
                 fontWeight: 500,
                 height: 20,
                 minWidth: 20,
-                padding: (theme) => theme.spacing(0, 0.5),
+                padding: "0 4px",
                 borderRadius: "50%",
                 display: "flex",
                 alignItems: "center",
@@ -75,9 +75,9 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
         classes={{
           paper: css`
             padding: 0;
-            width: ${theme.spacing(38)};
+            width: 304px;
             color: ${theme.palette.text.secondary};
-            margin-top: ${theme.spacing(0.5)};
+            margin-top: 4px;
           `,
         }}
       >
@@ -90,25 +90,24 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
 export const PortForwardPopoverView: React.FC<
   PortForwardButtonProps & { ports?: WorkspaceAgentListeningPort[] }
 > = (props) => {
+  const theme = useTheme();
   const { host, workspaceName, agent, username, ports } = props;
 
   return (
     <>
       <Box
-        sx={{
-          padding: (theme) => theme.spacing(2.5),
-          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        css={{
+          padding: 20,
+          borderBottom: `1px solid ${theme.palette.divider}`,
         }}
       >
         <HelpTooltipTitle>Forwarded ports</HelpTooltipTitle>
-        <HelpTooltipText
-          sx={{ color: (theme) => theme.palette.text.secondary }}
-        >
+        <HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
           {ports?.length === 0
             ? "No open ports were detected."
             : "The forwarded ports are exclusively accessible to you."}
         </HelpTooltipText>
-        <Box sx={{ marginTop: (theme) => theme.spacing(1.5) }}>
+        <Box css={{ marginTop: 12 }}>
           {ports?.map((p) => {
             const url = portForwardURL(
               host,
@@ -122,7 +121,7 @@ export const PortForwardPopoverView: React.FC<
               <Link
                 underline="none"
                 sx={{
-                  color: (theme) => theme.palette.text.primary,
+                  color: theme.palette.text.primary,
                   fontSize: 14,
                   display: "flex",
                   alignItems: "center",
@@ -141,7 +140,7 @@ export const PortForwardPopoverView: React.FC<
                   component="span"
                   sx={{
                     ml: "auto",
-                    color: (theme) => theme.palette.text.secondary,
+                    color: theme.palette.text.secondary,
                     fontSize: 13,
                     fontWeight: 400,
                   }}
@@ -154,28 +153,22 @@ export const PortForwardPopoverView: React.FC<
         </Box>
       </Box>
 
-      <Box
-        sx={{
-          padding: (theme) => theme.spacing(2.5),
-        }}
-      >
+      <Box css={{ padding: 20 }}>
         <HelpTooltipTitle>Forward port</HelpTooltipTitle>
-        <HelpTooltipText
-          sx={{ color: (theme) => theme.palette.text.secondary }}
-        >
+        <HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
           Access ports running on the agent:
         </HelpTooltipText>
 
         <Box
           component="form"
           sx={{
-            border: (theme) => `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.palette.divider}`,
             borderRadius: "4px",
             mt: 2,
             display: "flex",
             alignItems: "center",
             "&:focus-within": {
-              borderColor: (theme) => theme.palette.primary.main,
+              borderColor: theme.palette.primary.main,
             },
           }}
           onSubmit={(e) => {
@@ -201,26 +194,26 @@ export const PortForwardPopoverView: React.FC<
             min={0}
             max={65535}
             required
-            sx={{
+            css={{
               fontSize: 14,
               height: 34,
-              p: (theme) => theme.spacing(0, 1.5),
+              padding: "0 12px",
               background: "none",
               border: 0,
               outline: "none",
-              color: (theme) => theme.palette.text.primary,
+              color: theme.palette.text.primary,
               appearance: "textfield",
               display: "block",
               width: "100%",
             }}
           />
           <OpenInNewOutlined
-            sx={{
+            css={{
               flexShrink: 0,
               width: 14,
               height: 14,
-              marginRight: (theme) => theme.spacing(1.5),
-              color: (theme) => theme.palette.text.primary,
+              marginRight: 12,
+              color: theme.palette.text.primary,
             }}
           />
         </Box>
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index f5c0779d68..2d327c9976 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -2,9 +2,9 @@ import { type FC, useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
-import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { CopyableValue } from "components/CopyableValue/CopyableValue";
+import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { DropdownArrow } from "../DropdownArrow/DropdownArrow";
+import { CopyableValue } from "../CopyableValue/CopyableValue";
 import { Stack } from "../Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
@@ -12,7 +12,7 @@ import { SensitiveValue } from "./SensitiveValue";
 const styles = {
   resourceCard: (theme) => ({
     background: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
 
     "&:not(:first-of-type)": {
@@ -33,7 +33,7 @@ const styles = {
   },
 
   resourceCardHeader: (theme) => ({
-    padding: theme.spacing(3, 4),
+    padding: "24px 32px",
     borderBottom: `1px solid ${theme.palette.divider}`,
 
     "&:last-child": {
@@ -112,13 +112,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
         </Stack>
 
         <div
-          css={(theme) => ({
+          css={{
             flexGrow: 2,
             display: "grid",
             gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
-            gap: theme.spacing(5),
-            rowGap: theme.spacing(3),
-          })}
+            gap: 40,
+            rowGap: 24,
+          }}
         >
           {resource.daily_cost > 0 && (
             <div css={styles.metadata}>
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index d908ae2bd7..5b9bf71b31 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -55,12 +55,12 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 };
 
 const styles = {
-  buttonWrapper: (theme) => ({
+  buttonWrapper: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    marginTop: theme.spacing(2),
-  }),
+    marginTop: 16,
+  },
 
   showMoreButton: {
     borderRadius: 9999,
diff --git a/site/src/components/Resources/SSHButton/SSHButton.tsx b/site/src/components/Resources/SSHButton/SSHButton.tsx
index d9827d0795..c1c6afac21 100644
--- a/site/src/components/Resources/SSHButton/SSHButton.tsx
+++ b/site/src/components/Resources/SSHButton/SSHButton.tsx
@@ -41,10 +41,10 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
         horizontal="right"
         classes={{
           paper: css`
-            padding: ${theme.spacing(2, 3, 3)};
-            width: ${theme.spacing(38)};
+            padding: 16px 24px 24px;
+            width: 304px;
             color: ${theme.palette.text.secondary};
-            margin-top: ${theme.spacing(0.25)};
+            margin-top: 2px;
           `,
         }}
       >
@@ -94,9 +94,9 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
 };
 
 const styles = {
-  codeExamples: (theme) => ({
-    marginTop: theme.spacing(1.5),
-  }),
+  codeExamples: {
+    marginTop: 12,
+  },
 
   codeExampleLabel: {
     fontSize: 12,
diff --git a/site/src/components/Resources/SensitiveValue.tsx b/site/src/components/Resources/SensitiveValue.tsx
index dcf2fb5a6e..7e9d62403a 100644
--- a/site/src/components/Resources/SensitiveValue.tsx
+++ b/site/src/components/Resources/SensitiveValue.tsx
@@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
-import { useState } from "react";
+import { type FC, useState } from "react";
 import { css } from "@emotion/react";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
@@ -11,7 +11,7 @@ const Language = {
   hideLabel: "Hide value",
 };
 
-export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
+export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
   const [shouldDisplay, setShouldDisplay] = useState(false);
   const displayValue = shouldDisplay ? value : "••••••••";
   const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@@ -23,11 +23,11 @@ export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
 
   return (
     <div
-      css={(theme) => ({
+      css={{
         display: "flex",
         alignItems: "center",
-        gap: theme.spacing(0.5),
-      })}
+        gap: 4,
+      }}
     >
       <CopyableValue
         value={value}
diff --git a/site/src/components/RichParameterInput/MultiTextField.tsx b/site/src/components/RichParameterInput/MultiTextField.tsx
index ab1c03842e..7adcda6fc1 100644
--- a/site/src/components/RichParameterInput/MultiTextField.tsx
+++ b/site/src/components/RichParameterInput/MultiTextField.tsx
@@ -72,15 +72,15 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
 const styles = {
   root: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    minHeight: theme.spacing(6), // Chip height + paddings
-    padding: theme.spacing(1.25, 1.75),
-    fontSize: theme.spacing(2),
+    borderRadius: 8,
+    minHeight: 48, // Chip height + paddings
+    padding: "10px 14px",
+    fontSize: 16,
     display: "flex",
     flexWrap: "wrap",
-    gap: theme.spacing(1),
+    gap: 8,
     position: "relative",
-    margin: theme.spacing(1, 0, 0.5), // Have same margin than TextField
+    margin: "8px 0 4px", // Have same margin than TextField
 
     "&:has(input:focus)": {
       borderColor: theme.palette.primary.main,
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index a59f55d884..6f047f4239 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -4,7 +4,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
@@ -17,9 +17,9 @@ const isBoolean = (parameter: TemplateVersionParameter) => {
 };
 
 const styles = {
-  label: (theme) => ({
-    marginBottom: theme.spacing(0.5),
-  }),
+  label: {
+    marginBottom: 4,
+  },
   labelCaption: (theme) => ({
     fontSize: 14,
     color: theme.palette.text.secondary,
@@ -43,11 +43,11 @@ const styles = {
       fontSize: 14,
     },
   }),
-  labelImmutable: (theme) => ({
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
+  labelImmutable: {
+    marginTop: 4,
+    marginBottom: 4,
     color: colors.yellow[7],
-  }),
+  },
   textField: {
     ".small & .MuiInputBase-root": {
       height: 36,
@@ -55,32 +55,32 @@ const styles = {
       borderRadius: 6,
     },
   },
-  radioGroup: (theme) => ({
+  radioGroup: {
     ".small & .MuiFormControlLabel-label": {
       fontSize: 14,
     },
     ".small & .MuiRadio-root": {
-      padding: theme.spacing(0.75, "9px"), // 8px + 1px border
+      padding: "6px 9px", // 8px + 1px border
     },
     ".small & .MuiRadio-root svg": {
       width: 16,
       height: 16,
     },
-  }),
-  checkbox: (theme) => ({
+  },
+  checkbox: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1),
-  }),
-  labelIconWrapper: (theme) => ({
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    gap: 8,
+  },
+  labelIconWrapper: {
+    width: 20,
+    height: 20,
     display: "block",
 
     ".small &": {
       display: "none",
     },
-  }),
+  },
   labelIcon: {
     width: "100%",
     height: "100%",
@@ -175,7 +175,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
-  const theme = useTheme();
   const small = size === "small";
 
   if (isBoolean(parameter)) {
@@ -232,9 +231,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
                     spacing={small ? 1 : 0}
                     alignItems={small ? "center" : undefined}
                     direction={small ? "row" : "column"}
-                    css={{
-                      padding: small ? undefined : `${theme.spacing(0.5)} 0`,
-                    }}
+                    css={{ padding: small ? undefined : "4px 0" }}
                   >
                     {small ? (
                       <Tooltip
diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
index 7eb933383b..1373fb3dae 100644
--- a/site/src/components/SettingsLayout/Section.tsx
+++ b/site/src/components/SettingsLayout/Section.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode, type PropsWithChildren } from "react";
 import { SectionAction } from "./SectionAction";
@@ -32,8 +31,6 @@ export const Section: SectionFC = ({
   children,
   layout = "fixed",
 }) => {
-  const theme = useTheme();
-
   return (
     <section className={className} id={id} data-testid={id}>
       <div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
@@ -55,7 +52,7 @@ export const Section: SectionFC = ({
             {toolbar && <div>{toolbar}</div>}
           </div>
         )}
-        {alert && <div css={{ marginBottom: theme.spacing(1) }}>{alert}</div>}
+        {alert && <div css={{ marginBottom: 8 }}>{alert}</div>}
         {children}
       </div>
     </section>
@@ -66,16 +63,16 @@ export const Section: SectionFC = ({
 Section.Action = SectionAction;
 
 const styles = {
-  header: (theme) => ({
-    marginBottom: theme.spacing(3),
+  header: {
+    marginBottom: 24,
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-  }),
+  },
   description: (theme) => ({
     color: theme.palette.text.secondary,
     fontSize: 16,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
     lineHeight: "140%",
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/SettingsLayout/SectionAction.tsx b/site/src/components/SettingsLayout/SectionAction.tsx
index 952cce2fc7..2fa570c08d 100644
--- a/site/src/components/SettingsLayout/SectionAction.tsx
+++ b/site/src/components/SettingsLayout/SectionAction.tsx
@@ -7,13 +7,5 @@ import { type FC } from "react";
 export const SectionAction: FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  return (
-    <div
-      css={(theme) => ({
-        marginTop: theme.spacing(3),
-      })}
-    >
-      {children}
-    </div>
-  );
+  return <div css={{ marginTop: 24 }}>{children}</div>;
 };
diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx
index 434a794372..622ad2c718 100644
--- a/site/src/components/SettingsLayout/SettingsLayout.tsx
+++ b/site/src/components/SettingsLayout/SettingsLayout.tsx
@@ -18,21 +18,10 @@ export const SettingsLayout: FC = () => {
       </Helmet>
 
       <Margins>
-        <Stack
-          css={(theme) => ({
-            padding: theme.spacing(6, 0),
-          })}
-          direction="row"
-          spacing={6}
-        >
+        <Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
           <Sidebar user={me} />
           <Suspense fallback={<Loader />}>
-            <main
-              css={{
-                maxWidth: 800,
-                width: "100%",
-              }}
-            >
+            <main css={{ maxWidth: 800, width: "100%" }}>
               <Outlet />
             </main>
           </Suspense>
diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
index c8e929f83a..93693afcee 100644
--- a/site/src/components/SettingsLayout/Sidebar.tsx
+++ b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -33,8 +33,8 @@ const SidebarNavItem: FC<
     display: block;
     font-size: 14px;
     text-decoration: none;
-    padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
-    border-radius: ${theme.shape.borderRadius / 2}px;
+    padding: 12px 12px 12px 16px;
+    border-radius: 4px;
     transition: background-color 0.15s ease-in-out;
     margin-bottom: 1px;
     position: relative;
@@ -56,8 +56,8 @@ const SidebarNavItem: FC<
       left: 0;
       top: 0;
       background-color: ${theme.palette.secondary.dark};
-      border-top-left-radius: ${theme.shape.borderRadius};
-      border-bottom-left-radius: ${theme.shape.borderRadius};
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
     }
   `;
 
@@ -82,14 +82,7 @@ const SidebarNavItem: FC<
 const SidebarNavItemIcon: React.FC<{
   icon: ComponentType<{ className?: string }>;
 }> = ({ icon: Icon }) => {
-  return (
-    <Icon
-      css={(theme) => ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-      })}
-    />
-  );
+  return <Icon css={{ width: 16, height: 16 }} />;
 };
 
 export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
@@ -150,7 +143,7 @@ const styles = {
   },
   userInfo: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   }),
   userData: {
     overflow: "hidden",
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index df614fcc62..2f2e423ee3 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -5,7 +5,7 @@ import { colors } from "theme/colors";
 export const Sidebar = styled((props: BoxProps) => (
   <Box {...props} component="nav" />
 ))(({ theme }) => ({
-  width: theme.spacing(32),
+  width: 256,
   flexShrink: 0,
   borderRight: `1px solid ${theme.palette.divider}`,
   height: "100%",
@@ -22,7 +22,7 @@ export const SidebarItem = styled(
   fontSize: 14,
   width: "100%",
   textAlign: "left",
-  padding: theme.spacing(0, 3),
+  padding: "0 24px",
   cursor: "pointer",
   pointerEvents: active ? "none" : "auto",
   color: active ? theme.palette.text.primary : theme.palette.text.secondary,
@@ -30,8 +30,8 @@ export const SidebarItem = styled(
     background: theme.palette.action.hover,
     color: theme.palette.text.primary,
   },
-  paddingTop: theme.spacing(1.25),
-  paddingBottom: theme.spacing(1.25),
+  paddingTop: 10,
+  paddingBottom: 10,
 }));
 
 export const SidebarCaption = styled(Box)(({ theme }) => ({
@@ -39,6 +39,6 @@ export const SidebarCaption = styled(Box)(({ theme }) => ({
   textTransform: "uppercase",
   fontWeight: 500,
   color: theme.palette.text.secondary,
-  padding: theme.spacing(1.5, 3),
+  padding: "12px 24px",
   letterSpacing: "0.5px",
 }));
diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
index 7a7c2f4b51..f2c7f0973c 100644
--- a/site/src/components/SignInLayout/SignInLayout.tsx
+++ b/site/src/components/SignInLayout/SignInLayout.tsx
@@ -32,7 +32,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
           css={(theme) => ({
             fontSize: 12,
             color: theme.palette.text.secondary,
-            marginTop: theme.spacing(3),
+            marginTop: 24,
           })}
         >
           {`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index fdb5c0b221..73f725e267 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -25,15 +25,15 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
     <div
       {...divProps}
       ref={ref}
-      css={(theme) => ({
+      css={{
         display: "flex",
         flexDirection: direction,
-        gap: spacing && theme.spacing(spacing),
+        gap: spacing * 8,
         alignItems: alignItems,
         justifyContent: justifyContent,
         flexWrap: wrap,
         maxWidth: "100%",
-      })}
+      }}
     >
       {children}
     </div>
diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx
index a54f8f3a0b..8eca667743 100644
--- a/site/src/components/Stats/Stats.tsx
+++ b/site/src/components/Stats/Stats.tsx
@@ -23,9 +23,9 @@ export const StatsItem: FC<
 const styles = {
   stats: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
     display: "flex",
     alignItems: "center",
@@ -35,20 +35,20 @@ const styles = {
 
     [theme.breakpoints.down("md")]: {
       display: "block",
-      padding: theme.spacing(2),
+      padding: 16,
     },
   }),
 
   statItem: (theme) => ({
-    padding: theme.spacing(1.75),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+    padding: 14,
+    paddingLeft: 16,
+    paddingRight: 16,
     display: "flex",
     alignItems: "baseline",
-    gap: theme.spacing(1),
+    gap: 8,
 
     [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(1),
+      padding: 8,
     },
   }),
 
@@ -58,7 +58,7 @@ const styles = {
   },
 
   statsValue: (theme) => ({
-    marginTop: theme.spacing(0.25),
+    marginTop: 2,
     display: "flex",
     wordWrap: "break-word",
     color: theme.palette.text.primary,
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
index ebaca19bfc..c2ed983881 100644
--- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
+++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -35,7 +35,7 @@ export const SyntaxHighlighter: FC<{
   return (
     <div
       css={(theme) => ({
-        padding: theme.spacing(1, 0),
+        padding: "8px 0",
         background: theme.palette.background.paper,
         height: "100%",
       })}
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
index 72a24b4c3c..c802452ba3 100644
--- a/site/src/components/TableLoader/TableLoader.tsx
+++ b/site/src/components/TableLoader/TableLoader.tsx
@@ -1,21 +1,12 @@
 import TableCell from "@mui/material/TableCell";
 import TableRow, { type TableRowProps } from "@mui/material/TableRow";
 import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
-import { useTheme } from "@emotion/react";
 import { Loader } from "../Loader/Loader";
 
 export const TableLoader: FC = () => {
-  const theme = useTheme();
-
   return (
     <TableRow>
-      <TableCell
-        colSpan={999}
-        css={{
-          textAlign: "center",
-          height: theme.spacing(20),
-        }}
-      >
+      <TableCell colSpan={999} css={{ textAlign: "center", height: 160 }}>
         <Loader />
       </TableCell>
     </TableRow>
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
index ae249ba093..080350ddc2 100644
--- a/site/src/components/TableToolbar/TableToolbar.tsx
+++ b/site/src/components/TableToolbar/TableToolbar.tsx
@@ -4,13 +4,15 @@ import Skeleton from "@mui/material/Skeleton";
 
 export const TableToolbar = styled(Box)(({ theme }) => ({
   fontSize: 13,
-  marginBottom: theme.spacing(1),
+  marginBottom: "8px",
   marginTop: 0,
-  height: 36, // The size of a small button
+  height: "36px", // The size of a small button
   color: theme.palette.text.secondary,
-  "& strong": { color: theme.palette.text.primary },
   display: "flex",
   alignItems: "center",
+  "& strong": {
+    color: theme.palette.text.primary,
+  },
 }));
 
 type BasePaginationStatusProps = {
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
index b7e6c6de61..6199b9da5e 100644
--- a/site/src/components/Tabs/Tabs.tsx
+++ b/site/src/components/Tabs/Tabs.tsx
@@ -10,15 +10,15 @@ export const Tabs = ({ children }: { children: ReactNode }) => {
     <div
       css={(theme) => ({
         borderBottom: `1px solid ${theme.palette.divider}`,
-        marginBottom: theme.spacing(5),
+        marginBottom: 40,
       })}
     >
       <Margins
-        css={(theme) => ({
+        css={{
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(0.25),
-        })}
+          gap: 2,
+        }}
       >
         {children}
       </Margins>
@@ -34,7 +34,7 @@ export const TabLink = (props: NavLinkProps) => {
     color: ${theme.palette.text.secondary};
     font-size: 14px;
     display: block;
-    padding: ${theme.spacing(0, 2, 2)};
+    padding: 0 16px 16px;
 
     &:hover {
       color: ${theme.palette.text.primary};
diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
index db8252ef90..cc5199f4a7 100644
--- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
@@ -33,7 +33,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 const styles = {
   template: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     background: theme.palette.background.paper,
     textDecoration: "none",
     textAlign: "left",
@@ -47,36 +47,36 @@ const styles = {
     },
   }),
 
-  templateIcon: (theme) => ({
-    width: theme.spacing(12),
-    height: theme.spacing(12),
+  templateIcon: {
+    width: 96,
+    height: 96,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
 
     "& img": {
-      height: theme.spacing(4),
+      height: 32,
     },
-  }),
+  },
 
-  templateInfo: (theme) => ({
-    padding: theme.spacing(2, 2, 2, 0),
+  templateInfo: {
+    padding: "16px 16px 16px 0",
     display: "flex",
     flexDirection: "column",
     overflow: "hidden",
-  }),
+  },
 
-  templateName: (theme) => ({
-    fontSize: theme.spacing(2),
+  templateName: {
+    fontSize: 16,
     textOverflow: "ellipsis",
     width: "100%",
     overflow: "hidden",
     whiteSpace: "nowrap",
-  }),
+  },
 
   templateDescription: (theme) => ({
-    fontSize: theme.spacing(1.75),
+    fontSize: 14,
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     width: "100%",
diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx
index c28a36bc81..1309a7e644 100644
--- a/site/src/components/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/components/TemplateFiles/TemplateFiles.tsx
@@ -99,13 +99,13 @@ const styles = {
   tab: (theme) => ({
     background: "transparent",
     border: 0,
-    padding: theme.spacing(0, 3),
+    padding: "0 24px",
     display: "flex",
     alignItems: "center",
-    height: theme.spacing(6),
+    height: 48,
     opacity: 0.85,
     cursor: "pointer",
-    gap: theme.spacing(0.5),
+    gap: 4,
     position: "relative",
     color: theme.palette.text.secondary,
     whiteSpace: "nowrap",
@@ -142,7 +142,7 @@ const styles = {
     width: 6,
     backgroundColor: theme.palette.warning.light,
     borderRadius: "100%",
-    marginLeft: theme.spacing(0.5),
+    marginLeft: 4,
   }),
 
   codeWrapper: (theme) => ({
@@ -150,7 +150,7 @@ const styles = {
   }),
 
   files: (theme) => ({
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
   }),
 
diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
index 1e67979ad6..1023c40a38 100644
--- a/site/src/components/Timeline/TimelineDateRow.tsx
+++ b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -23,7 +23,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
     >
       <TableCell
         css={{
-          padding: `${theme.spacing(1, 4)} !important`,
+          padding: `8px 32px !important`,
           background: `${theme.palette.background.paperLight} !important`,
           fontSize: 12,
           position: "relative",
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
index ae6ade772c..68595bf419 100644
--- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx
+++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
@@ -33,7 +32,6 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   className,
   size = "small",
 }) => {
-  const theme = useTheme();
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
     open: boolean;
@@ -130,10 +128,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
             ),
             classes: {
               root: css`
-                padding-left: ${theme.spacing(
-                  1.75,
-                )} !important; // Same padding left as input
-                gap: ${theme.spacing(0.5)};
+                padding-left: 14px !important; // Same padding left as input
+                gap: 4px;
               `,
             },
           }}
diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
index 3996bf760c..708a68c008 100644
--- a/site/src/components/Welcome/Welcome.tsx
+++ b/site/src/components/Welcome/Welcome.tsx
@@ -27,18 +27,16 @@ export const Welcome: FC<
         <CoderIcon
           css={{
             color: theme.palette.text.primary,
-            fontSize: theme.spacing(8),
+            fontSize: 64,
           }}
         />
       </div>
       <Typography
         css={css`
           text-align: center;
-          font-size: ${theme.spacing(4)};
+          font-size: 32px;
           font-weight: 400;
-          margin: 0;
-          margin-bottom: ${theme.spacing(4)};
-          margin-top: ${theme.spacing(2)};
+          margin: 16px 0 32px;
           line-height: 1.25;
 
           & strong {
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
index 9fd0d0fe39..cb4b0a525a 100644
--- a/site/src/components/WorkspaceBuildLogs/Logs.tsx
+++ b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -25,7 +25,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 }) => {
   return (
     <div css={styles.root} className={className}>
-      <div css={styles.scrollWrapper}>
+      <div css={{ minWidth: "fit-content" }}>
         {lines.map((line, idx) => (
           <div css={styles.line} className={line.level} key={idx}>
             {!hideTimestamps && (
@@ -63,7 +63,7 @@ export const LogLine: FC<{
 
   return (
     <div
-      css={[styles.line, isUsingLineNumber && styles.lineNumber]}
+      css={[styles.line, isUsingLineNumber && { paddingLeft: 16 }]}
       className={line.level}
       style={style}
     >
@@ -93,8 +93,8 @@ export const LogLine: FC<{
 const styles = {
   root: (theme) => ({
     minHeight: 156,
-    padding: theme.spacing(1, 0),
-    borderRadius: theme.shape.borderRadius,
+    padding: "8px 0",
+    borderRadius: 8,
     overflowX: "auto",
     background: theme.palette.background.default,
 
@@ -103,9 +103,6 @@ const styles = {
       borderRadius: 0,
     },
   }),
-  scrollWrapper: {
-    minWidth: "fit-content",
-  },
   line: (theme) => ({
     wordBreak: "break-all",
     display: "flex",
@@ -116,7 +113,7 @@ const styles = {
     height: "auto",
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
-    padding: theme.spacing(0, 4),
+    padding: "0 32px",
 
     "&.error": {
       backgroundColor: theme.palette.error.dark,
@@ -130,23 +127,20 @@ const styles = {
       backgroundColor: theme.palette.warning.dark,
     },
   }),
-  lineNumber: (theme) => ({
-    paddingLeft: theme.spacing(2),
-  }),
-  space: (theme) => ({
+  space: {
     userSelect: "none",
-    width: theme.spacing(3),
+    width: 24,
     display: "block",
     flexShrink: 0,
-  }),
+  },
   time: (theme) => ({
     userSelect: "none",
     whiteSpace: "pre",
     display: "inline-block",
     color: theme.palette.text.secondary,
   }),
-  number: (theme) => ({
-    width: theme.spacing(4),
+  number: {
+    width: 32,
     textAlign: "right",
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
index c728af060e..6403720652 100644
--- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
+++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -97,7 +97,7 @@ const styles = {
   header: (theme) => ({
     fontSize: 13,
     fontWeight: 600,
-    padding: theme.spacing(0.5, 3),
+    padding: "4px 24px",
     display: "flex",
     alignItems: "center",
     fontFamily: "Inter",
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index f01821eee2..463bf63692 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -89,7 +89,7 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
     backgroundColor: theme.palette.background.paperLight,
     border: `1px solid ${theme.palette.divider}`,
     fontSize: 12,
-    padding: theme.spacing(1, 1.25),
+    padding: "8px 10px",
   },
 }));
 
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 2f220193f2..1fb4ea6aa7 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/site/src/hooks/useClickableTableRow.ts
@@ -42,8 +42,8 @@ export const useClickableTableRow = ({
       },
 
       "&:last-of-type": {
-        borderBottomLeftRadius: theme.shape.borderRadius,
-        borderBottomRightRadius: theme.shape.borderRadius,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
       },
     },
     hover: true,
diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
index 3b842ae153..5b11ac4b6e 100644
--- a/site/src/pages/404Page/404Page.tsx
+++ b/site/src/pages/404Page/404Page.tsx
@@ -15,8 +15,8 @@ export const NotFoundPage: FC = () => {
     >
       <div
         css={(theme) => ({
-          margin: theme.spacing(1),
-          padding: theme.spacing(1),
+          margin: 8,
+          padding: 8,
           borderRight: theme.palette.divider,
         })}
       >
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
index f3594198de..e5b78f0169 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -69,15 +69,15 @@ const styles = {
     zIndex: 2,
   }),
 
-  diffColumn: (theme) => ({
+  diffColumn: {
     flex: 1,
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2.5),
-    paddingRight: theme.spacing(2),
+    paddingTop: 16,
+    paddingBottom: 20,
+    paddingRight: 16,
     lineHeight: "160%",
     alignSelf: "stretch",
     overflowWrap: "anywhere",
-  }),
+  },
 
   diffOld: (theme) => ({
     backgroundColor: theme.palette.error.dark,
@@ -89,15 +89,15 @@ const styles = {
     alignItems: "baseline",
   },
 
-  diffLine: (theme) => ({
+  diffLine: {
     opacity: 0.5,
-    width: theme.spacing(6),
+    width: 48,
     textAlign: "right",
     flexShrink: 0,
-  }),
+  },
 
   diffIcon: (theme) => ({
-    width: theme.spacing(4),
+    width: 32,
     textAlign: "center",
     fontSize: theme.typography.body1.fontSize,
     flexShrink: 0,
@@ -108,10 +108,10 @@ const styles = {
     color: theme.palette.success.contrastText,
   }),
 
-  diffValue: (theme) => ({
+  diffValue: {
     padding: 1,
-    borderRadius: theme.shape.borderRadius / 2,
-  }),
+    borderRadius: 4,
+  },
 
   diffValueOld: {
     backgroundColor: colors.red[12],
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 8daed04214..91a37b80a6 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -168,9 +168,9 @@ const styles = {
     border: 0,
   },
 
-  auditLogHeader: (theme) => ({
-    padding: theme.spacing(2, 4),
-  }),
+  auditLogHeader: {
+    padding: "16px 32px",
+  },
 
   auditLogHeaderInfo: {
     flex: 1,
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
index 2eee4f742f..88180b954a 100644
--- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx
+++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -26,7 +26,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         css={{
           fontSize: 16,
           color: theme.palette.text.secondary,
-          marginBottom: theme.spacing(4),
+          marginBottom: 32,
           textAlign: "center",
           lineHeight: "160%",
         }}
@@ -48,7 +48,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         css={{
           display: "flex",
           justifyContent: "flex-end",
-          paddingTop: theme.spacing(1),
+          paddingTop: 8,
         }}
       >
         <Button component={RouterLink} size="large" to="/workspaces" fullWidth>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index 077cb46338..1f94711d23 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -695,18 +695,18 @@ const styles = {
   },
 
   optionText: (theme) => ({
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     color: theme.palette.text.primary,
   }),
 
   optionHelperText: (theme) => ({
-    fontSize: theme.spacing(1.5),
+    fontSize: 12,
     color: theme.palette.text.secondary,
   }),
 
   error: (theme) => ({
-    padding: theme.spacing(3),
-    borderRadius: theme.spacing(1),
+    padding: 24,
+    borderRadius: 8,
     background: theme.palette.background.paper,
     border: `1px solid ${theme.palette.error.main}`,
   }),
@@ -719,13 +719,13 @@ const styles = {
   errorDescription: (theme) => ({
     margin: 0,
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
   }),
 
   errorDetails: (theme) => ({
     display: "block",
-    marginTop: theme.spacing(1),
+    marginTop: 8,
     color: theme.palette.error.light,
-    fontSize: theme.spacing(2),
+    fontSize: 16,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
index 0ca6807f6b..f3a557c536 100644
--- a/site/src/pages/CreateTemplatePage/VariableInput.tsx
+++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -114,7 +114,7 @@ const styles = {
     fontSize: 14,
     color: theme.palette.text.secondary,
     display: "block",
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
   }),
   labelDescription: (theme) => ({
     fontSize: 16,
diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
index 6da879d411..0c6bad22e9 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
@@ -72,12 +72,12 @@ export const CreateTokenPage: FC = () => {
       <p>Make sure you copy the below token before proceeding:</p>
       <CodeExample
         code={newToken?.key ?? ""}
-        css={(theme) => ({
+        css={{
           minHeight: "auto",
           userSelect: "all",
           width: "100%",
-          marginTop: theme.spacing(3),
-        })}
+          marginTop: 24,
+        }}
       />
     </>
   );
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index aa963e3029..150bbdcbe0 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -234,9 +234,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                   border: 1px solid ${theme.palette.warning.light};
                   border-radius: 8px;
                   background-color: ${theme.palette.background.paper};
-                  padding: ${theme.spacing(10)};
-                  margin-left: ${theme.spacing(-10)};
-                  margin-right: ${theme.spacing(-10)};
+                  padding: 80px;
+                  margin-left: -80px;
+                  margin-right: -80px;
                 `,
               }}
               getInputProps={(parameter, index) => {
@@ -308,9 +308,9 @@ const useExternalAuthVerification = (
 };
 
 const styles = {
-  hasDescription: (theme) => ({
-    paddingBottom: theme.spacing(2),
-  }),
+  hasDescription: {
+    paddingBottom: 16,
+  },
   description: (theme) => ({
     fontSize: 13,
     color: theme.palette.text.secondary,
diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
index 41b9baaf93..257b3fb8cc 100644
--- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
+++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
@@ -40,8 +40,8 @@ export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
 
 const styles = {
   template: (theme) => ({
-    padding: theme.spacing(2.5, 3),
-    borderRadius: theme.shape.borderRadius,
+    padding: "20px 24px",
+    borderRadius: 8,
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
   }),
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index 3a4330eb4c..e9d32f5702 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -134,8 +134,8 @@ export const AppearanceSettingsPageView = ({
               <InputAdornment
                 position="end"
                 css={{
-                  width: theme.spacing(3),
-                  height: theme.spacing(3),
+                  width: 24,
+                  height: 24,
 
                   "& img": {
                     maxWidth: "100%",
diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
index 59281518f4..051222fff8 100644
--- a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
@@ -1,4 +1,4 @@
-import { css, useTheme } from "@emotion/react";
+import { css } from "@emotion/react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -18,8 +18,6 @@ export type ExternalAuthSettingsPageViewProps = {
 export const ExternalAuthSettingsPageView = ({
   config,
 }: ExternalAuthSettingsPageViewProps): JSX.Element => {
-  const theme = useTheme();
-
   return (
     <>
       <Header
@@ -42,8 +40,8 @@ export const ExternalAuthSettingsPageView = ({
 
       <div
         css={{
-          marginTop: theme.spacing(3),
-          marginBottom: theme.spacing(3),
+          marginTop: 24,
+          marginBottom: 24,
         }}
       >
         <Alert severity="info" actions={<EnterpriseBadge key="enterprise" />}>
@@ -56,13 +54,13 @@ export const ExternalAuthSettingsPageView = ({
         <Table
           css={css`
             & td {
-              padding-top: ${theme.spacing(3)};
-              padding-bottom: ${theme.spacing(3)};
+              padding-top: 24px;
+              padding-bottom: 24px;
             }
 
             & td:last-child,
             & th:last-child {
-              padding-left: ${theme.spacing(4)};
+              padding-left: 32px;
             }
           `}
         >
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
index 6ba75d0d7e..097b208e9d 100644
--- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
@@ -28,7 +28,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
     <Paper
       css={{
         border: `1px solid ${theme.palette.divider}`,
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: 8,
       }}
       elevation={0}
     >
@@ -38,7 +38,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
             alignItems: "center",
             display: "flex",
             justifyContent: "space-between",
-            padding: theme.spacing(1.5, 2),
+            padding: "12px 16px",
           }}
         >
           <h6
@@ -54,12 +54,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
         </div>
       )}
 
-      <div
-        {...contentsProps}
-        css={{
-          margin: theme.spacing(2),
-        }}
-      >
+      <div {...contentsProps} css={{ margin: 16 }}>
         {children}
       </div>
     </Paper>
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
index c17e7ca505..fe067c42e6 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
@@ -23,8 +22,6 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
   isSavingLicense,
   savingLicenseError,
 }) => {
-  const theme = useTheme();
-
   function handleFileUploaded(files: File[]) {
     const fileReader = new FileReader();
     fileReader.onload = () => {
@@ -76,7 +73,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
         description="Select a text file that contains your license key."
       />
 
-      <Stack css={{ paddingTop: theme.spacing(5) }}>
+      <Stack css={{ paddingTop: 40 }}>
         <DividerWithText>or</DividerWithText>
 
         <Fieldset
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx
index 2a6346b2c5..4fd1c5e313 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx
@@ -21,10 +21,10 @@ const styles = {
     width: "100%",
   }),
   content: (theme) => ({
-    paddingTop: theme.spacing(0.5),
-    paddingBottom: theme.spacing(0.5),
-    paddingRight: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingRight: 16,
+    paddingLeft: 16,
     fontSize: theme.typography.h5.fontSize,
     color: theme.palette.text.secondary,
   }),
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
index 1e06759207..73b1c5b379 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
@@ -118,7 +118,7 @@ const styles = {
   }),
   licenseCard: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    padding: theme.spacing(2),
+    padding: 16,
   }),
   cardContent: {},
   licenseId: (theme) => ({
@@ -135,9 +135,9 @@ const styles = {
   licenseExpires: (theme) => ({
     color: theme.palette.text.secondary,
   }),
-  expiredBadge: (theme) => ({
-    marginBottom: theme.spacing(0.5),
-  }),
+  expiredBadge: {
+    marginBottom: 4,
+  },
   secondaryMaincolor: (theme) => ({
     color: theme.palette.text.secondary,
   }),
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index ede23c64e3..8c1063ac78 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -128,25 +128,25 @@ const LicensesSettingsPageView: FC<Props> = ({
 };
 
 const styles = {
-  title: (theme) => ({
-    fontSize: theme.spacing(2),
-  }),
+  title: {
+    fontSize: 16,
+  },
 
   root: (theme) => ({
-    minHeight: theme.spacing(30),
+    minHeight: 240,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(6),
+    padding: 48,
   }),
 
   description: (theme) => ({
     color: theme.palette.text.secondary,
     textAlign: "center",
-    maxWidth: theme.spacing(58),
-    marginTop: theme.spacing(1),
+    maxWidth: 464,
+    marginTop: 8,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
index 7105e8acde..02e353f281 100644
--- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -232,30 +232,30 @@ const styles = {
     color: theme.palette.text.primary,
   }),
 
-  installAlert: (theme) => ({
-    margin: theme.spacing(2),
-  }),
+  installAlert: {
+    margin: 16,
+  },
 
-  links: (theme) => ({
+  links: {
     display: "flex",
-    gap: theme.spacing(0.5),
-    margin: theme.spacing(2),
+    gap: 4,
+    margin: 16,
     flexDirection: "column",
-  }),
+  },
 
-  link: (theme) => ({
+  link: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     fontSize: 16,
-    gap: theme.spacing(1),
-  }),
+    gap: 8,
+  },
 
   status: (theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.spacing(1),
+    gap: 8,
     color: theme.palette.text.disabled,
   }),
 
@@ -263,6 +263,6 @@ const styles = {
     display: "flex",
     gap: 4,
     color: theme.palette.text.disabled,
-    margin: theme.spacing(4),
+    margin: 32,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index b454dcc14b..4d80b40111 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -220,7 +220,7 @@ const styles = {
     },
 
     "& .MuiTableCell-root:last-child": {
-      paddingRight: `${theme.spacing(2)} !important`,
+      paddingRight: `16px !important`,
     },
   }),
   arrowRight: (theme) => ({
diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx
index 6c5ecf05f7..bd54bb4305 100644
--- a/site/src/pages/HealthPage/HealthPage.tsx
+++ b/site/src/pages/HealthPage/HealthPage.tsx
@@ -114,7 +114,7 @@ export function HealthPageView({
       >
         <Box
           sx={{
-            width: (theme) => theme.spacing(32),
+            width: 256,
             flexShrink: 0,
             borderRight: (theme) => `1px solid ${theme.palette.divider}`,
           }}
@@ -125,7 +125,7 @@ export function HealthPageView({
               textTransform: "uppercase",
               fontWeight: 500,
               color: (theme) => theme.palette.text.secondary,
-              padding: (theme) => theme.spacing(1.5, 3),
+              padding: "12px 24px",
               letterSpacing: "0.5px",
             }}
           >
@@ -157,7 +157,7 @@ export function HealthPageView({
                       gap: 1,
                       textAlign: "left",
                       height: 36,
-                      padding: (theme) => theme.spacing(0, 3),
+                      padding: "0 24px",
                       cursor: "pointer",
                       pointerEvents: isActive ? "none" : "auto",
                       color: (theme) =>
@@ -214,15 +214,15 @@ const styles = {
   stats: (theme) => ({
     padding: 0,
     border: 0,
-    gap: theme.spacing(6),
-    rowGap: theme.spacing(3),
+    gap: 48,
+    rowGap: 24,
     flex: 1,
 
     [theme.breakpoints.down("md")]: {
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 6b30c1079f..06199bdf9b 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -82,7 +82,7 @@ export const IconsPage: FC = () => {
               title={
                 <Box
                   css={{
-                    padding: theme.spacing(1),
+                    padding: 8,
                     fontSize: 13,
                     lineHeight: 1.5,
                   }}
@@ -153,14 +153,14 @@ export const IconsPage: FC = () => {
           wrap="wrap"
           spacing={1}
           justifyContent="center"
-          css={(theme) => ({ marginTop: theme.spacing(4) })}
+          css={{ marginTop: 32 }}
         >
           {searchedIcons.length === 0 && (
             <EmptyState message="No results matched your search" />
           )}
           {searchedIcons.map((icon) => (
             <CopyableValue key={icon.url} value={icon.url} placement="bottom">
-              <Stack alignItems="center" css={{ margin: theme.spacing(1.5) }}>
+              <Stack alignItems="center" css={{ margin: 12 }}>
                 <img
                   alt={icon.url}
                   src={icon.url}
@@ -169,7 +169,7 @@ export const IconsPage: FC = () => {
                     height: 60,
                     objectFit: "contain",
                     pointerEvents: "none",
-                    padding: theme.spacing(1.5),
+                    padding: 12,
                   }}
                 />
                 <figcaption
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
index 5363fd6159..6866ef2562 100644
--- a/site/src/pages/LoginPage/LoginPageView.tsx
+++ b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -64,31 +64,31 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 };
 
 const styles = {
-  root: (theme) => ({
-    padding: theme.spacing(3),
+  root: {
+    padding: 24,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100%",
     textAlign: "center",
-  }),
+  },
 
-  container: (theme) => ({
+  container: {
     width: "100%",
     maxWidth: 385,
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: theme.spacing(2),
-  }),
+    gap: 16,
+  },
 
-  icon: (theme) => ({
-    fontSize: theme.spacing(8),
-  }),
+  icon: {
+    fontSize: 64,
+  },
 
   footer: (theme) => ({
     fontSize: 12,
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(3),
+    marginTop: 24,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index 4def9696c9..2fd38bb441 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -4,7 +4,6 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Box from "@mui/material/Box";
 import { type FC } from "react";
-import { useTheme } from "@emotion/react";
 import { Language } from "./SignInForm";
 import { type AuthMethods } from "api/typesGenerated";
 
@@ -19,11 +18,9 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
   redirectTo,
   authMethods,
 }) => {
-  const theme = useTheme();
-
   const iconStyles = {
-    width: theme.spacing(2),
-    height: theme.spacing(2),
+    width: 16,
+    height: 16,
   };
 
   return (
diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx
index c1b2e0524c..10e915b441 100644
--- a/site/src/pages/LoginPage/SignInForm.tsx
+++ b/site/src/pages/LoginPage/SignInForm.tsx
@@ -25,27 +25,27 @@ const styles = {
   root: {
     width: "100%",
   },
-  title: (theme) => ({
-    fontSize: theme.spacing(4),
+  title: {
+    fontSize: 32,
     fontWeight: 400,
     margin: 0,
-    marginBottom: theme.spacing(4),
+    marginBottom: 32,
     lineHeight: 1,
 
     "& strong": {
       fontWeight: 600,
     },
-  }),
-  alert: (theme) => ({
-    marginBottom: theme.spacing(4),
-  }),
-  divider: (theme) => ({
-    paddingTop: theme.spacing(3),
-    paddingBottom: theme.spacing(3),
+  },
+  alert: {
+    marginBottom: 32,
+  },
+  divider: {
+    paddingTop: 24,
+    paddingBottom: 24,
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(2),
-  }),
+    gap: 16,
+  },
   dividerLine: (theme) => ({
     width: "100%",
     height: 1,
@@ -58,10 +58,10 @@ const styles = {
     fontSize: 12,
     letterSpacing: 1,
   }),
-  icon: (theme) => ({
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-  }),
+  icon: {
+    width: 16,
+    height: 16,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface SignInFormProps {
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
index a7939cf971..c73ee21a8c 100644
--- a/site/src/pages/SetupPage/SetupPageView.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -64,30 +64,25 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
 
   return (
     <SignInLayout>
-      <header
-        css={(theme) => ({
-          textAlign: "center",
-          marginBottom: theme.spacing(4),
-        })}
-      >
+      <header css={{ textAlign: "center", marginBottom: 32 }}>
         <CoderIcon
           css={(theme) => ({
             color: theme.palette.text.primary,
-            fontSize: theme.spacing(8),
+            fontSize: 64,
           })}
         />
         <h1
-          css={(theme) => ({
+          css={{
             fontWeight: 400,
             margin: 0,
-            marginTop: theme.spacing(2),
-          })}
+            marginTop: 16,
+          }}
         >
           Welcome to <strong>Coder</strong>
         </h1>
         <div
           css={(theme) => ({
-            marginTop: theme.spacing(1.5),
+            marginTop: 12,
             color: theme.palette.text.secondary,
           })}
         >
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index a37d0ca918..91a0c44614 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -67,8 +67,8 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
         <Stack direction="row" spacing={3} alignItems="center">
           <div
             css={{
-              height: theme.spacing(6),
-              width: theme.spacing(6),
+              height: 48,
+              width: 48,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -93,13 +93,13 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
         css={{
           background: theme.palette.background.paper,
           border: `1px solid ${theme.palette.divider}`,
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: 8,
         }}
         id="readme"
       >
         <div
           css={{
-            padding: theme.spacing(5, 5, 8),
+            padding: "40px 40px 64px",
             maxWidth: 800,
             margin: "auto",
           }}
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
index 5b874d3a41..5aa8ef6f1d 100644
--- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
+++ b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
@@ -91,10 +91,10 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
 };
 
 const styles = {
-  filter: (theme) => ({
-    width: theme.spacing(26),
+  filter: {
+    width: 208,
     flexShrink: 0,
-  }),
+  },
 
   filterCaption: (theme) => ({
     textTransform: "uppercase",
@@ -120,11 +120,11 @@ const styles = {
     fontWeight: 600,
   }),
 
-  templates: (theme) => ({
+  templates: {
     flex: "1",
     display: "grid",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    gap: theme.spacing(2),
+    gap: 16,
     gridAutoRows: "min-content",
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
index 728642d008..f8273df9c7 100644
--- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -21,7 +21,7 @@ export default function TemplateDocsPage() {
         css={{
           background: theme.palette.background.paper,
           border: `1px solid ${theme.palette.divider}`,
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: 8,
         }}
         id="readme"
       >
@@ -29,7 +29,7 @@ export default function TemplateDocsPage() {
           css={{
             color: theme.palette.text.secondary,
             fontWeight: 600,
-            padding: theme.spacing(2, 3),
+            padding: "16px 24px",
             borderBottom: `1px solid ${theme.palette.divider}`,
           }}
         >
@@ -37,7 +37,7 @@ export default function TemplateDocsPage() {
         </div>
         <div
           css={{
-            padding: theme.spacing(0, 3, 5),
+            padding: "0 24px 40px",
             maxWidth: 800,
             margin: "auto",
           }}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 4a74227f2c..adf36d7a80 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -165,21 +165,21 @@ export const TemplateInsightsPageView = ({
   return (
     <>
       <Box
-        css={(theme) => ({
-          marginBottom: theme.spacing(4),
+        css={{
+          marginBottom: 32,
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(1),
-        })}
+          gap: 8,
+        }}
       >
         {controls}
       </Box>
       <Box
-        sx={{
+        css={{
           display: "grid",
           gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
           gridTemplateRows: "440px 440px auto",
-          gap: (theme) => theme.spacing(3),
+          gap: 24,
         }}
       >
         <ActiveUsersPanel
@@ -490,7 +490,7 @@ const TemplateParametersUsagePanel = ({
                   p: 3,
                   marginX: -3,
                   borderTop: (theme) => `1px solid ${theme.palette.divider}`,
-                  width: (theme) => `calc(100% + ${theme.spacing(6)})`,
+                  width: "calc(100% + 48px)",
                   "&:first-child": {
                     borderTop: 0,
                   },
@@ -560,12 +560,12 @@ const filterOrphanValues = (
   return true;
 };
 
-const ParameterUsageRow = styled(Box)(({ theme }) => ({
+const ParameterUsageRow = styled(Box)(() => ({
   display: "flex",
   alignItems: "baseline",
   justifyContent: "space-between",
-  padding: theme.spacing(0.5, 0),
-  gap: theme.spacing(5),
+  padding: "4px 0",
+  gap: 40,
 }));
 
 const ParameterUsageLabel = ({
@@ -640,7 +640,7 @@ const ParameterUsageLabel = ({
             <Box
               key={i}
               sx={{
-                p: (theme) => theme.spacing(0.25, 1.5),
+                p: "2px 12px",
                 borderRadius: 999,
                 background: (theme) => theme.palette.divider,
                 whiteSpace: "nowrap",
@@ -694,7 +694,7 @@ const ParameterUsageLabel = ({
 };
 
 const Panel = styled(Box)(({ theme }) => ({
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: 8,
   border: `1px solid ${theme.palette.divider}`,
   backgroundColor: theme.palette.background.paper,
   display: "flex",
@@ -703,8 +703,8 @@ const Panel = styled(Box)(({ theme }) => ({
 
 type PanelProps = ComponentProps<typeof Panel>;
 
-const PanelHeader = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(2.5, 3, 3),
+const PanelHeader = styled(Box)(() => ({
+  padding: "20px 24px 24px",
 }));
 
 const PanelTitle = styled(Box)(() => ({
@@ -712,8 +712,8 @@ const PanelTitle = styled(Box)(() => ({
   fontWeight: 500,
 }));
 
-const PanelContent = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(0, 3, 3),
+const PanelContent = styled(Box)(() => ({
+  padding: "0 24px 24px",
   flex: 1,
 }));
 
diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx
index 41a15264c9..1c83dee3e5 100644
--- a/site/src/pages/TemplatePage/TemplateLayout.tsx
+++ b/site/src/pages/TemplatePage/TemplateLayout.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { createContext, type FC, Suspense, useContext } from "react";
 import { useQuery } from "react-query";
 import { Outlet, useNavigate, useParams } from "react-router-dom";
@@ -62,7 +61,6 @@ export const useTemplateLayoutContext = (): TemplateLayoutContextValue => {
 export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   children = <Outlet />,
 }) => {
-  const theme = useTheme();
   const navigate = useNavigate();
   const orgId = useOrganizationId();
   const { template: templateName } = useParams() as { template: string };
@@ -74,7 +72,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
 
   if (error) {
     return (
-      <div css={{ margin: theme.spacing(2) }}>
+      <div css={{ margin: 16 }}>
         <ErrorAlert error={error} />
       </div>
     );
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
index 0fd8f80531..62fc6cb25a 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
@@ -139,9 +139,9 @@ const styles = {
     transition: "none",
   }),
 
-  versionWrapper: (theme) => ({
-    padding: theme.spacing(2, 4),
-  }),
+  versionWrapper: {
+    padding: "16px 32px",
+  },
 
   active: (theme) => ({
     backgroundColor: theme.palette.background.paperLight,
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
index fe10d385b6..9892812799 100644
--- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx
+++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -31,8 +31,8 @@ const SidebarNavItem: FC<
     display: block;
     font-size: 14px;
     text-decoration: none;
-    padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
-    border-radius: ${theme.shape.borderRadius / 2}px;
+    padding: 12px 12px 12px 16px;
+    border-radius: 4px;
     transition: background-color 0.15s ease-in-out;
     margin-bottom: 1px;
     position: relative;
@@ -54,8 +54,8 @@ const SidebarNavItem: FC<
       left: 0;
       top: 0;
       background-color: ${theme.palette.secondary.dark};
-      border-top-left-radius: ${theme.shape.borderRadius}px;
-      border-bottom-left-radius: ${theme.shape.borderRadius}px;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
     }
   `;
 
@@ -129,13 +129,13 @@ const styles = {
     width: 245,
     flexShrink: 0,
   },
-  sidebarNavItemIcon: (theme) => ({
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-  }),
+  sidebarNavItemIcon: {
+    width: 16,
+    height: 16,
+  },
   templateInfo: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   }),
   templateData: {
     overflow: "hidden",
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index 0a280911a2..a44c0ac4f5 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -212,12 +212,12 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 
 const styles = {
   optionText: (theme) => ({
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     color: theme.palette.text.primary,
   }),
 
   optionHelperText: (theme) => ({
-    fontSize: theme.spacing(1.5),
+    fontSize: 12,
     color: theme.palette.text.secondary,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
index 86fc73cc48..c0f2f723bf 100644
--- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -365,34 +365,34 @@ const styles = {
     width: 100,
   },
 
-  updateSelect: (theme) => ({
+  updateSelect: {
     margin: 0,
     // Set a fixed width for the select. It avoids selects having different sizes
     // depending on how many roles they have selected.
-    width: theme.spacing(25),
+    width: 200,
 
     "& .MuiSelect-root": {
       // Adjusting padding because it does not have label
-      paddingTop: theme.spacing(1.5),
-      paddingBottom: theme.spacing(1.5),
+      paddingTop: 12,
+      paddingBottom: 12,
 
       ".secondary": {
         display: "none",
       },
     },
-  }),
+  },
 
   role: {
     textTransform: "capitalize",
   },
 
-  menuItem: (theme) => ({
+  menuItem: {
     lineHeight: "140%",
-    paddingTop: theme.spacing(1.5),
-    paddingBottom: theme.spacing(1.5),
+    paddingTop: 12,
+    paddingBottom: 12,
     whiteSpace: "normal",
     inlineSize: "250px",
-  }),
+  },
 
   menuItemSecondary: (theme) => ({
     fontSize: 14,
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
index d8072bffbc..2203e1a165 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
@@ -136,22 +136,22 @@ const styles = {
       background: theme.palette.background.paper,
       border: `1px solid ${theme.palette.divider}`,
       width: "100%",
-      maxWidth: theme.spacing(125),
+      maxWidth: 1000,
     },
     "& .MuiDialogActions-spacing": {
-      padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
+      padding: "0 40px 40px",
     },
   }),
   dialogContent: (theme) => ({
     color: theme.palette.text.secondary,
-    padding: theme.spacing(5),
+    padding: 40,
   }),
   dialogTitle: (theme) => ({
     margin: 0,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
     color: theme.palette.text.primary,
     fontWeight: 400,
-    fontSize: theme.spacing(2.5),
+    fontSize: 20,
   }),
   dialogDescription: (theme) => ({
     color: theme.palette.text.secondary,
@@ -167,7 +167,7 @@ const styles = {
     },
 
     "& > p": {
-      margin: theme.spacing(1, 0),
+      margin: "8px 0",
     },
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
index 4fab050d02..876539f610 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -57,9 +57,9 @@ export const TemplateSettingsLayout: FC = () => {
 
       <Margins>
         <Stack
-          css={(theme) => ({
-            padding: theme.spacing(6, 0),
-          })}
+          css={{
+            padding: "48px 0",
+          }}
           direction="row"
           spacing={10}
         >
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
index 561e2ecbd3..5a2f1e9d83 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -48,7 +48,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
         <PageHeaderTitle>Template variables</PageHeaderTitle>
       </PageHeader>
       {hasError && (
-        <Stack css={(theme) => ({ marginBottom: theme.spacing(8) })}>
+        <Stack css={{ marginBottom: 64 }}>
           {Boolean(errors.buildError) && (
             <ErrorAlert error={errors.buildError} />
           )}
diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
index 5557ea8f23..eba1649f1d 100644
--- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
@@ -74,7 +74,7 @@ export const FileTreeView: FC<{
           }
 
           & > .MuiTreeItem-content {
-            padding: ${theme.spacing(0.25, 2)};
+            padding: 2px 16px;
             color: ${theme.palette.text.secondary};
 
             & svg {
@@ -102,7 +102,7 @@ export const FileTreeView: FC<{
 
             // We need to find a better way to recursive padding here
             & .MuiTreeItem-content {
-              padding-left: calc(var(--level) * ${theme.spacing(5)});
+              padding-left: calc(var(--level) * 40px);
             }
           }
         `}
diff --git a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx
index 2c6a32ce39..3545cf9fca 100644
--- a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { useTheme, type Interpolation, type Theme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
@@ -28,7 +28,6 @@ export type MissingTemplateVariablesDialogProps = Omit<
 export const MissingTemplateVariablesDialog: FC<
   MissingTemplateVariablesDialogProps
 > = ({ missingVariables, onSubmit, ...dialogProps }) => {
-  const theme = useTheme();
   const [variableValues, setVariableValues] = useState<VariableValue[]>([]);
 
   // Pre-fill the form with the default values when missing variables are loaded
@@ -53,10 +52,10 @@ export const MissingTemplateVariablesDialog: FC<
         id="update-build-parameters-title"
         classes={{
           root: css`
-            padding: ${theme.spacing(3, 5)};
+            padding: 24px 40px;
 
             & h2 {
-              font-size: ${theme.spacing(2.5)};
+              font-size: 20px;
               font-weight: 400;
             }
           `,
@@ -115,21 +114,21 @@ export const MissingTemplateVariablesDialog: FC<
 };
 
 const styles = {
-  content: (theme) => ({
-    padding: theme.spacing(0, 5),
-  }),
+  content: {
+    padding: "0 40px",
+  },
 
   info: {
     margin: 0,
   },
 
-  form: (theme) => ({
-    paddingTop: theme.spacing(4),
-  }),
+  form: {
+    paddingTop: 32,
+  },
 
-  dialogActions: (theme) => ({
-    padding: theme.spacing(5),
+  dialogActions: {
+    padding: 40,
     flexDirection: "column",
-    gap: theme.spacing(1),
-  }),
+    gap: 8,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 30c89a159f..a4aaa8debe 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -425,7 +425,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 css={[
                   styles.panel,
                   {
-                    paddingBottom: theme.spacing(2),
+                    paddingBottom: 16,
                     display: selectedTab !== "resources" ? "none" : undefined,
                   },
                 ]}
@@ -465,7 +465,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 const styles = {
   topbar: (theme) => ({
-    padding: theme.spacing(2),
+    padding: 16,
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: "flex",
     alignItems: "center",
@@ -473,11 +473,11 @@ const styles = {
     height: topbarHeight,
     background: theme.palette.background.paper,
   }),
-  topbarSides: (theme) => ({
+  topbarSides: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(2),
-  }),
+    gap: 16,
+  },
   sidebarAndEditor: {
     display: "flex",
     flex: 1,
@@ -492,7 +492,7 @@ const styles = {
   sidebarTitle: (theme) => ({
     fontSize: 10,
     textTransform: "uppercase",
-    padding: theme.spacing(1, 2),
+    padding: "8px 16px",
     color: theme.palette.text.primary,
     fontWeight: 500,
     letterSpacing: "0.5px",
@@ -538,7 +538,7 @@ const styles = {
   }),
   tab: (theme) => ({
     cursor: "pointer",
-    padding: theme.spacing(1.5),
+    padding: 12,
     fontSize: 10,
     textTransform: "uppercase",
     letterSpacing: "0.5px",
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index 62e89705c8..4446ecef63 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -106,24 +106,24 @@ const styles = {
     paddingBottom: 0,
   },
 
-  emptyImage: (theme) => ({
+  emptyImage: {
     maxWidth: "50%",
-    height: theme.spacing(40),
+    height: 320,
     overflow: "hidden",
     opacity: 0.85,
 
     "& img": {
       maxWidth: "100%",
     },
-  }),
+  },
 
-  featuredExamples: (theme) => ({
-    maxWidth: theme.spacing(100),
+  featuredExamples: {
+    maxWidth: 800,
     display: "grid",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    gap: theme.spacing(2),
+    gap: 16,
     gridAutoRows: "min-content",
-  }),
+  },
 
   template: (theme) => ({
     backgroundColor: theme.palette.background.paperLight,
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index 45a289c888..81bd825d42 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -333,7 +333,7 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
   return (
     <Box
       sx={{
-        padding: theme.spacing(0, 2),
+        padding: "0 16px",
         background: (theme) => theme.palette.background.paper,
         display: "flex",
         alignItems: "center",
@@ -355,7 +355,7 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
               alignItems: "center",
               gap: 1,
               border: 0,
-              padding: theme.spacing(1),
+              padding: 8,
             }}
           >
             <Box
@@ -376,7 +376,7 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
           sx={{
             pointerEvents: "none",
             "& .MuiPaper-root": {
-              padding: (theme) => theme.spacing(1, 2),
+              padding: "8px 16px",
             },
           }}
           anchorOrigin={{
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index e15ccc83d5..15d619b767 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -105,9 +105,9 @@ function SSOEmptyState() {
     <EmptyState
       css={(theme) => ({
         minHeight: 0,
-        padding: theme.spacing(6, 4),
+        padding: "48px 32px",
         backgroundColor: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: 8,
       })}
       message="No SSO Providers"
       description="No SSO providers are configured with this Coder deployment."
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
index 5842426fe1..f0b859c0a0 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -14,13 +14,7 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
   const cliCreateCommand = "coder tokens create";
 
   const TokenActions = () => (
-    <Stack
-      direction="row"
-      justifyContent="end"
-      css={(theme) => ({
-        marginBottom: theme.spacing(1),
-      })}
-    >
+    <Stack direction="row" justifyContent="end" css={{ marginBottom: 8 }}>
       <Button startIcon={<AddIcon />} component={RouterLink} to="new">
         Add token
       </Button>
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index 16f37eeec1..9417514536 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -129,7 +129,7 @@ const ProxyMessagesList: FC<{
       sx={{
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: (theme) => theme.palette.background.default,
-        p: (theme) => theme.spacing(2, 3),
+        p: "16px 24px",
       }}
     >
       <Box
@@ -147,7 +147,7 @@ const ProxyMessagesList: FC<{
           component="pre"
           key={"message" + index}
           sx={{
-            margin: (theme) => theme.spacing(0, 0, 1),
+            margin: "0 0 8px",
             fontSize: 14,
             whiteSpace: "pre-wrap",
           }}
diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.tsx
index 42725a1e8f..9bf8bbe51b 100644
--- a/site/src/pages/UsersPage/ResetPasswordDialog.tsx
+++ b/site/src/pages/UsersPage/ResetPasswordDialog.tsx
@@ -1,5 +1,4 @@
 import { type FC } from "react";
-import { useTheme } from "@emotion/react";
 import type * as TypesGen from "api/typesGenerated";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -26,8 +25,6 @@ export const Language = {
 export const ResetPasswordDialog: FC<
   React.PropsWithChildren<ResetPasswordDialogProps>
 > = ({ open, onClose, onConfirm, user, newPassword, loading }) => {
-  const theme = useTheme();
-
   const description = (
     <>
       <p>{Language.message(user?.username)}</p>
@@ -37,7 +34,7 @@ export const ResetPasswordDialog: FC<
           minHeight: "auto",
           userSelect: "all",
           width: "100%",
-          marginTop: theme.spacing(3),
+          marginTop: 24,
         }}
       />
     </>
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
index e4c9a500d7..aee37a8f1f 100644
--- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
+++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -117,8 +117,8 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
       <PopoverContent
         classes={{
           paper: css`
-            width: ${theme.spacing(45)};
-            margin-top: ${theme.spacing(1)};
+            width: 360px;
+            margin-top: 8px;
             background: ${theme.palette.background.paperLight};
           `,
         }}
@@ -162,8 +162,8 @@ const styles = {
     color: theme.palette.text.secondary,
 
     "& .MuiSvgIcon-root": {
-      width: theme.spacing(2),
-      height: theme.spacing(2),
+      width: 16,
+      height: 16,
       position: "relative",
       top: -2, // Align the pencil square
     },
@@ -182,37 +182,37 @@ const styles = {
       opacity: 0.5,
     },
   },
-  options: (theme) => ({
-    padding: theme.spacing(3),
-  }),
+  options: {
+    padding: 24,
+  },
   option: {
     cursor: "pointer",
     fontSize: 14,
   },
-  checkbox: (theme) => ({
+  checkbox: {
     padding: 0,
     position: "relative",
     top: 1, // Alignment
 
     "& svg": {
-      width: theme.spacing(2.5),
-      height: theme.spacing(2.5),
+      width: 20,
+      height: 20,
     },
-  }),
+  },
   optionDescription: (theme) => ({
     fontSize: 13,
     color: theme.palette.text.secondary,
     lineHeight: "160%",
   }),
   footer: (theme) => ({
-    padding: theme.spacing(3),
+    padding: 24,
     backgroundColor: theme.palette.background.paper,
     borderTop: `1px solid ${theme.palette.divider}`,
     fontSize: 14,
   }),
   userIcon: (theme) => ({
-    width: theme.spacing(2.5), // Same as the checkbox
-    height: theme.spacing(2.5),
+    width: 20, // Same as the checkbox
+    height: 20,
     color: theme.palette.primary.main,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index 29bd70b532..e3deb15f48 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -48,7 +48,7 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
               <Stack
                 spacing={0}
                 direction="row"
-                css={{ columnGap: theme.spacing(1), alignItems: "center" }}
+                css={{ columnGap: 8, alignItems: "center" }}
               >
                 <GroupIcon
                   sx={{
@@ -89,7 +89,7 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
                   display: "flex",
                   flexFlow: "column nowrap",
                   fontSize: theme.typography.body2.fontSize,
-                  padding: theme.spacing(0.5, 0.25),
+                  padding: "4px 2px",
                   gap: 0,
                 }}
               >
@@ -99,7 +99,7 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
                     <ListItem
                       key={group.id}
                       css={{
-                        columnGap: theme.spacing(1.25),
+                        columnGap: 10,
                         alignItems: "center",
                       }}
                     >
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
index 7b016d3f9f..b9cc757d52 100644
--- a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -115,9 +115,9 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
           ".MuiPaper-root": {
             display: "flex",
             flexFlow: "row wrap",
-            columnGap: theme.spacing(1),
-            rowGap: theme.spacing(1.5),
-            padding: theme.spacing(1.5, 2),
+            columnGap: 8,
+            rowGap: 12,
+            padding: "12px 16px",
             alignContent: "space-around",
             minWidth: "auto",
           },
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
index 15ae9ca173..e40c6b8fd5 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
+++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -242,15 +242,15 @@ const styles = {
   stats: (theme) => ({
     padding: 0,
     border: 0,
-    gap: theme.spacing(6),
-    rowGap: theme.spacing(3),
+    gap: 48,
+    rowGap: 24,
     flex: 1,
 
     [theme.breakpoints.down("md")]: {
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 
diff --git a/site/src/pages/WorkspacePage/BuildRow.tsx b/site/src/pages/WorkspacePage/BuildRow.tsx
index 0356a87fa7..41071787ab 100644
--- a/site/src/pages/WorkspacePage/BuildRow.tsx
+++ b/site/src/pages/WorkspacePage/BuildRow.tsx
@@ -85,9 +85,9 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
 };
 
 const styles = {
-  buildWrapper: (theme) => ({
-    padding: theme.spacing(2, 4),
-  }),
+  buildWrapper: {
+    padding: "16px 32px",
+  },
 
   buildCell: {
     padding: "0 !important",
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
index a3fa053364..bf6c0ae523 100644
--- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
+++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -6,7 +6,6 @@ import Box from "@mui/material/Box";
 import AlertTitle from "@mui/material/AlertTitle";
 import InfoIcon from "@mui/icons-material/InfoOutlined";
 import { css } from "@emotion/css";
-import { useTheme } from "@emotion/react";
 import type { Template, TemplateVersion } from "api/typesGenerated";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import type { DialogProps } from "components/Dialogs/Dialog";
@@ -38,7 +37,6 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
   const selectedTemplateVersion = useRef<TemplateVersion | undefined>();
   const version = selectedTemplateVersion.current;
-  const theme = useTheme();
 
   return (
     <ConfirmDialog
@@ -102,12 +100,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
                             >
                               {option.name}
                               {option.message && (
-                                <InfoIcon
-                                  sx={(theme) => ({
-                                    width: theme.spacing(1.5),
-                                    height: theme.spacing(1.5),
-                                  })}
-                                />
+                                <InfoIcon sx={{ width: 12, height: 12 }} />
                               )}
                             </Stack>
                             {template?.active_version_id === option.id && (
@@ -138,7 +131,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
                           classes: {
                             // Same `padding-left` as input
                             root: css`
-                              padding-left: ${theme.spacing(1.75)} !important;
+                              padding-left: 14px !important;
                             `,
                           },
                         }}
diff --git a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx
index f91f807ac8..a4581e580f 100644
--- a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx
+++ b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx
@@ -8,7 +8,7 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { type FC } from "react";
 import { css } from "@emotion/css";
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { getFormHelpers } from "utils/formUtils";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { FormFields, VerticalForm } from "components/Form/Form";
@@ -31,7 +31,6 @@ export type UpdateBuildParametersDialogProps = DialogProps & {
 export const UpdateBuildParametersDialog: FC<
   UpdateBuildParametersDialogProps
 > = ({ missedParameters, onUpdate, ...dialogProps }) => {
-  const theme = useTheme();
   const form = useFormik({
     initialValues: {
       rich_parameter_values: getInitialRichParameterValues(missedParameters),
@@ -59,10 +58,10 @@ export const UpdateBuildParametersDialog: FC<
         id="update-build-parameters-title"
         classes={{
           root: css`
-            padding: ${theme.spacing(3, 5)};
+            padding: 24px 40px;
 
             & h2 {
-              font-size: ${theme.spacing(2.5)};
+              font-size: 20px;
               font-weight: 400;
             }
           `,
@@ -125,17 +124,17 @@ export const UpdateBuildParametersDialog: FC<
 };
 
 const styles = {
-  content: (theme) => ({
-    padding: theme.spacing(0, 5, 0, 5),
-  }),
+  content: {
+    padding: "0 40px",
+  },
 
-  form: (theme) => ({
-    paddingTop: theme.spacing(4),
-  }),
+  form: {
+    paddingTop: 32,
+  },
 
-  dialogActions: (theme) => ({
-    padding: theme.spacing(5),
+  dialogActions: {
+    padding: 40,
     flexDirection: "column",
-    gap: theme.spacing(1),
-  }),
+    gap: 8,
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index a6ed168ec8..0122e64cf1 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -361,9 +361,9 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 };
 
 const styles = {
-  content: (theme) => ({
-    marginTop: theme.spacing(4),
-  }),
+  content: {
+    marginTop: 32,
+  },
 
   actions: (theme) => ({
     [theme.breakpoints.down("md")]: {
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
index 333d7999e7..18965aafab 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -51,7 +51,7 @@ export const BuildParametersPopover = ({
       </PopoverTrigger>
       <PopoverContent
         horizontal="right"
-        css={(theme) => ({ ".MuiPaper-root": { width: theme.spacing(38) } })}
+        css={{ ".MuiPaper-root": { width: 304 } }}
       >
         <BuildParametersPopoverContent
           workspace={workspace}
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
index ead3f4c702..906f009a6a 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -115,11 +115,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
   return (
     <div
-      css={(theme) => ({
-        display: "flex",
-        alignItems: "center",
-        gap: theme.spacing(1.5),
-      })}
+      css={{ display: "flex", alignItems: "center", gap: 12 }}
       data-testid="workspace-actions"
     >
       {canBeUpdated &&
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
index 332e7aa076..a45f01c793 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -34,7 +34,7 @@ export const WorkspaceBuildLogsSection = ({
         sx={(theme) => ({
           background: theme.palette.background.paper,
           borderBottom: `1px solid ${theme.palette.divider}`,
-          padding: theme.spacing(1, 1, 1, 3),
+          padding: "8px 8px 8px 24px",
           fontSize: 13,
           fontWeight: 600,
           display: "flex",
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
index 03fd0bf65e..f3280ae68d 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -142,15 +142,15 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 };
 
 const styles = {
-  stack: (theme) => ({
-    paddingLeft: theme.spacing(0.2),
-    paddingRight: theme.spacing(0.2),
-  }),
-  barHelpers: (theme) => ({
+  stack: {
+    paddingLeft: 2,
+    paddingRight: 2,
+  },
+  barHelpers: {
     display: "flex",
     justifyContent: "space-between",
-    marginTop: theme.spacing(0.5),
-  }),
+    marginTop: 4,
+  },
   label: (theme) => ({
     fontSize: 12,
     display: "block",
diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
index ba043b868d..93650af02f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import { WorkspaceOutdatedTooltip } from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
 import { type FC } from "react";
@@ -63,20 +63,19 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
   onDeadlineMinus,
   onDeadlinePlus,
 }) => {
-  const theme = useTheme();
   const displayTemplateName = getDisplayWorkspaceTemplateName(workspace);
   const deadlinePlusEnabled = maxDeadlineIncrease >= 1;
   const deadlineMinusEnabled = maxDeadlineDecrease >= 1;
   const templatePoliciesEnabled = useTemplatePoliciesEnabled();
 
   const paperStyles = css`
-    padding: ${theme.spacing(3)};
-    max-width: ${theme.spacing(36)};
-    margin-top: ${theme.spacing(1)};
+    padding: 24px;
+    max-width: 288px;
+    margin-top: ${8};
     border-radius: 4px;
     display: flex;
     flex-direction: column;
-    gap: ${theme.spacing(1)};
+    gap: ${8};
   `;
 
   return (
@@ -338,15 +337,15 @@ const styles = {
   stats: (theme) => ({
     padding: 0,
     border: 0,
-    gap: theme.spacing(6),
-    rowGap: theme.spacing(3),
+    gap: 48,
+    rowGap: 24,
     flex: 1,
 
     [theme.breakpoints.down("md")]: {
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 
@@ -361,17 +360,17 @@ const styles = {
     },
   },
 
-  scheduleValue: (theme) => ({
+  scheduleValue: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1.5),
-  }),
+    gap: 12,
+  },
 
-  scheduleControls: (theme) => ({
+  scheduleControls: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(0.5),
-  }),
+    gap: 4,
+  },
 
   scheduleButton: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
@@ -380,8 +379,8 @@ const styles = {
     height: 20,
 
     "& svg.MuiSvgIcon-root": {
-      width: theme.spacing(1.5),
-      height: theme.spacing(1.5),
+      width: 12,
+      height: 12,
     },
   }),
 
@@ -393,21 +392,21 @@ const styles = {
     color: theme.palette.text.secondary,
   }),
 
-  timePopoverForm: (theme) => ({
+  timePopoverForm: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1),
-    padding: theme.spacing(1, 0),
-  }),
+    gap: 8,
+    padding: "8px 0",
+  },
 
   timePopoverField: {
     margin: 0,
   },
 
-  timePopoverButton: (theme) => ({
+  timePopoverButton: {
     borderRadius: 4,
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+    paddingLeft: 16,
+    paddingRight: 16,
     flexShrink: 0,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
index d146ea2418..829960ce77 100644
--- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -30,8 +30,8 @@ const SidebarNavItem: FC<
     display: "block",
     fontSize: 14,
     textDecoration: "none",
-    padding: theme.spacing(1.5, 1.5, 1.5, 2),
-    borderRadius: theme.shape.borderRadius / 2,
+    padding: "12px 12px 12px 16px",
+    borderRadius: 4,
     transition: "background-color 0.15s ease-in-out",
     marginBottom: 1,
     position: "relative",
@@ -53,8 +53,8 @@ const SidebarNavItem: FC<
       left: 0,
       top: 0,
       backgroundColor: theme.palette.secondary.dark,
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderBottomLeftRadius: theme.shape.borderRadius,
+      borderTopLeftRadius: 8,
+      borderBottomLeftRadius: 8,
     },
   });
 
@@ -77,14 +77,7 @@ const SidebarNavItem: FC<
 const SidebarNavItemIcon: FC<{
   icon: ComponentType<{ className?: string }>;
 }> = ({ icon: Icon }) => {
-  return (
-    <Icon
-      css={(theme) => ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-      })}
-    />
-  );
+  return <Icon css={{ width: 16, height: 16 }} />;
 };
 
 export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
@@ -131,7 +124,7 @@ const styles = {
   },
   workspaceInfo: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   }),
   workspaceData: {
     overflow: "hidden",
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
index c7656c8ea0..caf2d3bb88 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
@@ -118,7 +118,7 @@ export const WorkspaceParametersPageView: FC<
             }
             css={(theme) => ({
               border: `1px solid ${theme.palette.divider}`,
-              borderRadius: theme.shape.borderRadius,
+              borderRadius: 8,
             })}
           />
         )
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
index 9af1694528..3f3b7baca1 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
@@ -337,22 +337,17 @@ export const WorkspaceScheduleForm: FC<
           </Stack>
 
           <FormControl component="fieldset" error={Boolean(form.errors.monday)}>
-            <FormLabel
-              css={{
-                fontSize: 12,
-              }}
-              component="legend"
-            >
+            <FormLabel css={{ fontSize: 12 }} component="legend">
               {Language.daysOfWeekLabel}
             </FormLabel>
 
             <FormGroup
-              css={(theme) => ({
+              css={{
                 display: "flex",
                 flexDirection: "row",
                 flexWrap: "wrap",
-                paddingTop: theme.spacing(0.5),
-              })}
+                paddingTop: 4,
+              }}
             >
               {checkboxes.map((checkbox) => (
                 <FormControlLabel
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
index a3c2340fda..debd303678 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
@@ -2,7 +2,6 @@ import { createContext, type FC, Suspense, useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import { Outlet, useParams } from "react-router-dom";
 import { useQuery } from "react-query";
-import { useTheme } from "@emotion/react";
 import type { Workspace } from "api/typesGenerated";
 import { workspaceByOwnerAndName } from "api/queries/workspaces";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -26,7 +25,6 @@ export function useWorkspaceSettings() {
 }
 
 export const WorkspaceSettingsLayout: FC = () => {
-  const theme = useTheme();
   const params = useParams() as {
     workspace: string;
     username: string;
@@ -51,11 +49,7 @@ export const WorkspaceSettingsLayout: FC = () => {
       </Helmet>
 
       <Margins>
-        <Stack
-          css={{ padding: theme.spacing(6, 0) }}
-          direction="row"
-          spacing={10}
-        >
+        <Stack css={{ padding: "48px 0" }} direction="row" spacing={10}>
           {isError ? (
             <ErrorAlert error={error} />
           ) : (
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
index 9bb9977e42..5f09481a4b 100644
--- a/site/src/pages/WorkspacesPage/LastUsed.tsx
+++ b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -13,14 +13,12 @@ type CircleProps = {
 };
 
 const Circle: FC<CircleProps> = ({ color, variant = "solid" }) => {
-  const theme = useTheme();
-
   return (
     <div
       aria-hidden
       css={{
-        width: theme.spacing(1),
-        height: theme.spacing(1),
+        width: 8,
+        height: 8,
         backgroundColor: variant === "solid" ? color : undefined,
         border: variant === "outlined" ? `1px solid ${color}` : undefined,
         borderRadius: 9999,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 2e3d656360..cbbd8e63fa 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -22,7 +22,6 @@ import {
 } from "components/Popover/Popover";
 
 const ICON_SIZE = 18;
-const COLUMN_GAP = 1.5;
 
 type TemplatesQuery = UseQueryResult<Template[]>;
 
@@ -70,7 +69,7 @@ export function WorkspacesButton({
           onValueChange={(newValue) => setSearchTerm(newValue)}
           placeholder="Type/select a workspace template"
           label="Template select for workspace"
-          sx={{ flexShrink: 0, columnGap: COLUMN_GAP }}
+          sx={{ flexShrink: 0, columnGap: 1.5 }}
         />
 
         <OverflowY
@@ -96,7 +95,7 @@ export function WorkspacesButton({
 
         <Box
           css={(theme) => ({
-            padding: theme.spacing(1, 0),
+            padding: "8px 0",
             borderTop: `1px solid ${theme.palette.divider}`,
           })}
         >
@@ -105,7 +104,7 @@ export function WorkspacesButton({
             css={(theme) => ({
               display: "flex",
               alignItems: "center",
-              columnGap: theme.spacing(COLUMN_GAP),
+              columnGap: 12,
 
               color: theme.palette.primary.main,
             })}
@@ -123,11 +122,11 @@ function WorkspaceResultsRow({ template }: { template: Template }) {
   return (
     <PopoverLink
       to={`/templates/${template.name}/workspace`}
-      css={(theme) => ({
+      css={{
         display: "flex",
-        gap: theme.spacing(COLUMN_GAP),
+        gap: 12,
         alignItems: "center",
-      })}
+      }}
     >
       <Avatar
         src={template.icon}
@@ -182,7 +181,7 @@ function PopoverLink(props: RouterLinkProps) {
       {...props}
       css={(theme) => ({
         color: theme.palette.text.primary,
-        padding: theme.spacing(1, 2),
+        padding: "8px 16px",
         fontSize: 14,
         outline: "none",
         textDecoration: "none",
diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
index c354e97d2d..8b328ba6f5 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -81,14 +81,14 @@ export const WorkspacesEmpty = (props: {
       cta={
         <div>
           <div
-            css={(theme) => ({
+            css={{
               display: "flex",
               flexWrap: "wrap",
-              gap: theme.spacing(2),
-              marginBottom: theme.spacing(3),
+              gap: 16,
+              marginBottom: 24,
               justifyContent: "center",
               maxWidth: "800px",
-            })}
+            }}
           >
             {featuredTemplates?.map((t) => (
               <Link
@@ -96,12 +96,12 @@ export const WorkspacesEmpty = (props: {
                 key={t.id}
                 css={(theme) => ({
                   width: "320px",
-                  padding: theme.spacing(2),
+                  padding: 16,
                   borderRadius: 6,
                   border: `1px solid ${theme.palette.divider}`,
                   textAlign: "left",
                   display: "flex",
-                  gap: theme.spacing(2),
+                  gap: 16,
                   textDecoration: "none",
                   color: "inherit",
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 0150187bdd..689b857509 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -195,12 +195,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
                   </TableCell>
 
                   <TableCell>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        paddingLeft: (theme) => theme.spacing(2),
-                      }}
-                    >
+                    <Box css={{ display: "flex", paddingLeft: 16 }}>
                       <KeyboardArrowRight
                         sx={{
                           color: (theme) => theme.palette.text.secondary,
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 5f9ba828b5..c2684b2b99 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -144,7 +144,7 @@ dark = createTheme(dark, {
           letterSpacing: "normal",
           fontWeight: 500,
           height: BUTTON_MD_HEIGHT,
-          padding: theme.spacing(1, 2),
+          padding: "8px 16px",
           borderRadius: "6px",
           fontSize: 14,