diff --git a/.nx/version-plans/version-plan-1770963411683.md b/.nx/version-plans/version-plan-1770963411683.md
new file mode 100644
index 000000000..a19707e97
--- /dev/null
+++ b/.nx/version-plans/version-plan-1770963411683.md
@@ -0,0 +1,5 @@
+---
+desktop: minor
+---
+
+Add dark mode
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ca278827b..29738178d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,7 +5,7 @@
   "nix.enableLanguageServer": true,
   "nix.serverPath": "nixd",
   "nix.serverSettings": { "nixd": { "formatting": { "command": ["alejandra"] } } },
-  "tailwindCSS.experimental.configFile": "packages/ui/src/styles.css",
+  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/index.css",
   "tailwindCSS.classAttributes": [" "],
   "tailwindCSS.classFunctions": ["tw"],
   "tailwindCSS.lint.cssConflict": "ignore",
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index c32c22d54..0c365b940 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -2,7 +2,7 @@ import { Command, FetchHttpClient, Path, Url } from '@effect/platform';
 import * as NodeContext from '@effect/platform-node/NodeContext';
 import * as NodeRuntime from '@effect/platform-node/NodeRuntime';
 import { Config, Console, Effect, pipe, Runtime, String } from 'effect';
-import { app, BrowserWindow, dialog, Dialog, globalShortcut, ipcMain, protocol, shell } from 'electron';
+import { app, BrowserWindow, dialog, Dialog, globalShortcut, ipcMain, nativeTheme, protocol, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import os from 'node:os';
 import { Agent } from 'undici';
@@ -31,6 +31,7 @@ const createWindow = Effect.gen(function* () {
 
   // Create the browser window.
   const mainWindow = new BrowserWindow({
+    backgroundColor: nativeTheme.shouldUseDarkColors ? '#18181b' : 'white',
     height: 600,
     icon,
     title: 'DevTools Studio',
diff --git a/apps/desktop/src/renderer/main.tsx b/apps/desktop/src/renderer/main.tsx
index f1858d992..3bd70ca33 100644
--- a/apps/desktop/src/renderer/main.tsx
+++ b/apps/desktop/src/renderer/main.tsx
@@ -9,10 +9,13 @@ import { Button } from '@the-dev-tools/ui/button';
 import { Logo } from '@the-dev-tools/ui/illustrations';
 import { ProgressBar } from '@the-dev-tools/ui/progress-bar';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { setTheme } from '@the-dev-tools/ui/theme';
 import packageJson from '../../package.json';
 
 import './styles.css';
 
+setTheme();
+
 pipe(configProviderFromMetaEnv({ VERSION: packageJson.version }), Layer.setConfigProvider, addGlobalLayer);
 
 const updateCheckAtom = runtimeAtom.atom(
@@ -63,7 +66,7 @@ const UpdateAvailable = ({ children }: UpdateAvailableProps) => {
       </div>
 
       {/* eslint-disable-next-line better-tailwindcss/no-unregistered-classes */}
-      <div className={tw`prose flex-1 overflow-auto`}>
+      <div className={tw`prose dark:prose-invert flex-1 overflow-auto`}>
         <Markdown>{children}</Markdown>
       </div>
 
diff --git a/packages/client/src/features/delta/index.tsx b/packages/client/src/features/delta/index.tsx
index c45559b69..45a74637b 100644
--- a/packages/client/src/features/delta/index.tsx
+++ b/packages/client/src/features/delta/index.tsx
@@ -185,7 +185,7 @@ export const DeltaResetButton = <Schema extends ApiCollectionSchema, Key extends
   return (
     <TooltipTrigger delay={750}>
       <Button
-        className={tw`shrink-0 p-1 text-slate-500`}
+        className={tw`shrink-0 p-1 text-on-neutral-low`}
         isDisabled={!deltaId || !hasDelta}
         onPress={() =>
           void collection.utils.update?.({
@@ -198,7 +198,7 @@ export const DeltaResetButton = <Schema extends ApiCollectionSchema, Key extends
       >
         <RedoIcon />
       </Button>
-      <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Reset delta</Tooltip>
+      <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>Reset delta</Tooltip>
     </TooltipTrigger>
   );
 };
diff --git a/packages/client/src/features/expression/code-mirror/extensions.tsx b/packages/client/src/features/expression/code-mirror/extensions.tsx
index 9817b1050..223ffefa9 100644
--- a/packages/client/src/features/expression/code-mirror/extensions.tsx
+++ b/packages/client/src/features/expression/code-mirror/extensions.tsx
@@ -89,7 +89,7 @@ const CompletionInfo = ({ completion, context, path }: CompletionInfoProps) => {
           }}
           variant='ghost'
         >
-          <LuClipboardCopy className={tw`size-4 text-slate-500`} />
+          <LuClipboardCopy className={tw`size-4 text-on-neutral-low`} />
         </Button>
       </div>
 
diff --git a/packages/client/src/features/expression/reference.tsx b/packages/client/src/features/expression/reference.tsx
index 2f2f5de3e..e2f81bd9d 100644
--- a/packages/client/src/features/expression/reference.tsx
+++ b/packages/client/src/features/expression/reference.tsx
@@ -18,6 +18,7 @@ import {
   ReferenceTreeItem,
 } from '@the-dev-tools/spec/buf/api/reference/v1/reference_pb';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { TreeItem } from '@the-dev-tools/ui/tree';
 import { useConnectSuspenseQuery } from '~/shared/api';
 import { useReactRender } from '~/shared/lib';
@@ -134,28 +135,30 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr
       textValue={keyText ?? kindIndexTag ?? ''}
     >
       {key.kind === ReferenceKeyKind.GROUP && (
-        <span className={tw`text-xs leading-5 font-semibold tracking-tight text-slate-800`}>{key.group}</span>
+        <span className={tw`text-xs leading-5 font-semibold tracking-tight text-on-neutral`}>{key.group}</span>
       )}
 
       {key.kind === ReferenceKeyKind.KEY && (
-        <span className={tw`font-mono text-xs leading-5 text-red-700`}>{key.key}</span>
+        <span className={tw`font-mono text-xs leading-5 text-danger`}>{key.key}</span>
       )}
 
       {tags.map((tag, index) => (
         <span
-          className={tw`rounded-sm bg-slate-200 px-2 py-0.5 text-xs font-medium tracking-tight text-slate-500`}
+          className={tw`rounded-sm bg-neutral px-2 py-0.5 text-xs font-medium tracking-tight text-on-neutral-low`}
           key={index}
         >
           {tag}
         </span>
       ))}
 
-      {quantity && <span className={tw`text-xs leading-5 font-medium tracking-tight text-slate-500`}>{quantity}</span>}
+      {quantity && (
+        <span className={tw`text-xs leading-5 font-medium tracking-tight text-on-neutral-low`}>{quantity}</span>
+      )}
 
       {reference.kind === ReferenceKind.VALUE && (
         <>
-          <span className={tw`font-mono text-xs leading-5 text-slate-800`}>:</span>
-          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-blue-700`}>{reference.value}</span>
+          <span className={tw`font-mono text-xs leading-5 text-on-neutral`}>:</span>
+          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-info`}>{reference.value}</span>
         </>
       )}
     </TreeItem>
@@ -163,7 +166,7 @@ export const ReferenceTreeItemView = ({ id, parentKeys, reference }: ReferenceTr
 };
 
 const fieldStyles = tv({
-  base: tw`min-w-0 rounded-md border border-slate-200 px-3 py-0.5 text-md text-slate-800`,
+  base: tw`min-w-0 rounded-md border border-neutral px-3 py-0.5 text-md text-on-neutral`,
   variants: {
     variant: {
       'table-cell': tw`w-full rounded-none border-transparent px-5 py-0.5 -outline-offset-4`,
@@ -192,6 +195,8 @@ export const ReferenceField = ({
   const props = Struct.omit(forwardedProps, ...fieldStyles.variantKeys);
   const variantProps = Struct.pick(forwardedProps, ...fieldStyles.variantKeys);
 
+  const { theme } = useTheme();
+
   const transport = useTransport();
   const client = createClient(ReferenceService, transport);
 
@@ -227,6 +232,7 @@ export const ReferenceField = ({
         else if (refProp) refProp.current = _;
         ref.current = _;
       }}
+      theme={theme}
       {...props}
     />
   );
diff --git a/packages/client/src/features/file-system/index.tsx b/packages/client/src/features/file-system/index.tsx
index 0c37915c1..d52daeccd 100644
--- a/packages/client/src/features/file-system/index.tsx
+++ b/packages/client/src/features/file-system/index.tsx
@@ -47,6 +47,7 @@ import { Modal, useProgrammaticModal } from '@the-dev-tools/ui/modal';
 import { DropIndicatorHorizontal } from '@the-dev-tools/ui/reorder';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
 import { TextInputField, useEditableTextState } from '@the-dev-tools/ui/text-field';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { TreeItem, TreeItemProps, TreeItemRouteLink } from '@the-dev-tools/ui/tree';
 import { saveFile, useEscapePortal } from '@the-dev-tools/ui/utils';
 import { useDeltaState } from '~/features/delta';
@@ -386,11 +387,11 @@ const FolderFile = ({ id }: FileItemProps) => {
       {({ isExpanded }) => (
         <>
           {name === 'Credentials' ? (
-            <TbGauge className={tw`size-4 text-slate-500`} />
+            <TbGauge className={tw`size-4 text-on-neutral-low`} />
           ) : isExpanded ? (
-            <FolderOpenedIcon className={tw`size-4 text-slate-500`} />
+            <FolderOpenedIcon className={tw`size-4 text-on-neutral-low`} />
           ) : (
-            <FiFolder className={tw`size-4 text-slate-500`} />
+            <FiFolder className={tw`size-4 text-on-neutral-low`} />
           )}
 
           <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
@@ -410,7 +411,7 @@ const FolderFile = ({ id }: FileItemProps) => {
           {showControls && (
             <MenuTrigger {...menuTriggerProps}>
               <Button className={tw`p-0.5`} variant='ghost'>
-                <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+                <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
               </Button>
 
               <Menu {...menuProps}>
@@ -442,6 +443,8 @@ const HttpFile = ({ id }: FileItemProps) => {
   const router = useRouter();
   const navigate = useNavigate();
 
+  const { theme } = useTheme();
+
   const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();
 
   const fileCollection = useApiCollection(FileCollectionSchema);
@@ -517,7 +520,7 @@ const HttpFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -573,18 +576,18 @@ const HttpFile = ({ id }: FileItemProps) => {
                           <>
                             <div className={tw`flex items-center justify-between`}>
                               <Heading
-                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`}
+                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`}
                                 slot='title'
                               >
                                 cURL export
                               </Heading>
 
                               <Button className={tw`p-1`} onPress={() => void close()} variant='ghost'>
-                                <FiX className={tw`size-5 text-slate-500`} />
+                                <FiX className={tw`size-5 text-on-neutral-low`} />
                               </Button>
                             </div>
 
-                            <CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
+                            <CodeMirror className={tw`flex-1`} height='100%' readOnly theme={theme} value={data} />
                           </>
                         )}
                       </Dialog>,
@@ -610,7 +613,7 @@ const HttpFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     item: (_) => <FileItem id={fileCollection.utils.getKey(_)} />,
     items: files,
@@ -625,6 +628,8 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
   const router = useRouter();
   const matchRoute = useMatchRoute();
 
+  const { theme } = useTheme();
+
   const { workspaceId } = routes.dashboard.workspace.route.useLoaderData();
 
   const fileCollection = useApiCollection(FileCollectionSchema);
@@ -704,7 +709,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -733,18 +738,18 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
                           <>
                             <div className={tw`flex items-center justify-between`}>
                               <Heading
-                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`}
+                                className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`}
                                 slot='title'
                               >
                                 cURL export
                               </Heading>
 
                               <Button className={tw`p-1`} onPress={() => void close()} variant='ghost'>
-                                <FiX className={tw`size-5 text-slate-500`} />
+                                <FiX className={tw`size-5 text-on-neutral-low`} />
                               </Button>
                             </div>
 
-                            <CodeMirror className={tw`flex-1`} height='100%' readOnly value={data} />
+                            <CodeMirror className={tw`flex-1`} height='100%' readOnly theme={theme} value={data} />
                           </>
                         )}
                       </Dialog>,
@@ -767,7 +772,7 @@ const HttpDeltaFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name ?? '',
@@ -820,7 +825,7 @@ const FlowFile = ({ id }: FileItemProps) => {
 
   const content = (
     <>
-      <FlowsIcon className={tw`size-4 text-slate-500`} />
+      <FlowsIcon className={tw`size-4 text-on-neutral-low`} />
 
       <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
         {name}
@@ -839,7 +844,7 @@ const FlowFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -870,7 +875,7 @@ const FlowFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name,
@@ -920,10 +925,10 @@ const CredentialFile = ({ id }: FileItemProps) => {
     <>
       {pipe(
         Match.value(kind),
-        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 text-slate-500`} />),
-        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 text-slate-500`} />),
-        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 text-slate-500`} />),
-        Match.orElse(() => <TbGauge className={tw`size-4 text-slate-500`} />),
+        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 text-on-neutral-low`} />),
+        Match.orElse(() => <TbGauge className={tw`size-4 text-on-neutral-low`} />),
       )}
 
       <Text className={twJoin(tw`flex-1 truncate`, isEditing && tw`opacity-0`)} ref={escapeRef}>
@@ -943,7 +948,7 @@ const CredentialFile = ({ id }: FileItemProps) => {
       {showControls && (
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-0.5`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -963,7 +968,7 @@ const CredentialFile = ({ id }: FileItemProps) => {
 
   const props = {
     children: content,
-    className: toNavigate && matchRoute(route) !== false ? tw`bg-slate-200` : '',
+    className: toNavigate && matchRoute(route) !== false ? tw`bg-neutral` : '',
     id,
     onContextMenu,
     textValue: name,
diff --git a/packages/client/src/features/form-table/index.tsx b/packages/client/src/features/form-table/index.tsx
index aea4aba60..7d8f8cbe5 100644
--- a/packages/client/src/features/form-table/index.tsx
+++ b/packages/client/src/features/form-table/index.tsx
@@ -9,9 +9,9 @@ interface ColumnActionDeleteProps {
 
 export const ColumnActionDelete = ({ onDelete }: ColumnActionDeleteProps) => (
   <TooltipTrigger delay={750}>
-    <Button className={tw`p-1 text-red-700`} onPress={onDelete} variant='ghost'>
+    <Button className={tw`p-1 text-danger`} onPress={onDelete} variant='ghost'>
       <LuTrash2 />
     </Button>
-    <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Delete</Tooltip>
+    <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>Delete</Tooltip>
   </TooltipTrigger>
 );
diff --git a/packages/client/src/pages/credential/tab.tsx b/packages/client/src/pages/credential/tab.tsx
index 1884a1294..17e77d797 100644
--- a/packages/client/src/pages/credential/tab.tsx
+++ b/packages/client/src/pages/credential/tab.tsx
@@ -42,10 +42,12 @@ export const CredentialTab = ({ credentialId }: CredentialTabProps) => {
     <>
       {pipe(
         Match.value(credential?.kind),
-        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.when(CredentialKind.ANTHROPIC, () => <RiAnthropicFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 shrink-0 text-slate-500`} />),
-        Match.orElse(() => <TbGauge className={tw`size-4 shrink-0 text-slate-500`} />),
+        Match.when(CredentialKind.OPEN_AI, () => <RiOpenaiFill className={tw`size-4 shrink-0 text-on-neutral-low`} />),
+        Match.when(CredentialKind.ANTHROPIC, () => (
+          <RiAnthropicFill className={tw`size-4 shrink-0 text-on-neutral-low`} />
+        )),
+        Match.when(CredentialKind.GEMINI, () => <RiGeminiFill className={tw`size-4 shrink-0 text-on-neutral-low`} />),
+        Match.orElse(() => <TbGauge className={tw`size-4 shrink-0 text-on-neutral-low`} />),
       )}
 
       <span className={tw`min-w-0 flex-1 truncate`}>{credential?.name}</span>
diff --git a/packages/client/src/pages/dashboard/routes/index.tsx b/packages/client/src/pages/dashboard/routes/index.tsx
index ab72e462c..4cfd29fdf 100644
--- a/packages/client/src/pages/dashboard/routes/index.tsx
+++ b/packages/client/src/pages/dashboard/routes/index.tsx
@@ -68,15 +68,15 @@ export const WorkspaceListPage = () => {
   return (
     <div className={tw`container mx-auto my-12 grid min-h-0 gap-x-10 gap-y-6`}>
       <div className={tw`col-span-full`}>
-        <span className={tw`mb-1 text-sm leading-5 tracking-tight text-slate-500`}>
+        <span className={tw`mb-1 text-sm leading-5 tracking-tight text-on-neutral-low`}>
           {pipe(DateTime.unsafeNow(), DateTime.formatLocal({ dateStyle: 'full' }))}
         </span>
-        <h1 className={tw`text-2xl leading-8 font-medium tracking-tight text-slate-800`}>Welcome to DevTools 👋</h1>
+        <h1 className={tw`text-2xl leading-8 font-medium tracking-tight text-on-neutral`}>Welcome to DevTools 👋</h1>
       </div>
 
-      <div className={tw`relative flex min-h-0 flex-col rounded-lg border border-slate-200`} ref={containerRef}>
+      <div className={tw`relative flex min-h-0 flex-col rounded-lg border border-neutral`} ref={containerRef}>
         <div className={tw`flex items-center gap-2 border-b border-inherit px-5 py-3`}>
-          <span className={tw`flex-1 font-semibold tracking-tight text-slate-800`}>Your Workspaces</span>
+          <span className={tw`flex-1 font-semibold tracking-tight text-on-neutral`}>Your Workspaces</span>
           <Button
             onPress={async () =>
               void workspaceCollection.utils.insert({
@@ -93,7 +93,7 @@ export const WorkspaceListPage = () => {
 
         <ListBox
           aria-label='Workspaces'
-          className={tw`flex-1 divide-y divide-slate-200 overflow-auto`}
+          className={tw`flex-1 divide-y divide-neutral overflow-auto`}
           dragAndDropHooks={dragAndDropHooks}
           items={workspaces}
           selectionMode='none'
@@ -165,12 +165,12 @@ const Item = ({ containerRef, id }: ItemProps) => {
         <div
           className={tw`
             grid flex-1 grid-flow-col grid-cols-[1fr] grid-rows-2 gap-x-9 text-xs leading-5 tracking-tight
-            text-slate-500
+            text-on-neutral-low
           `}
         >
           <div
             className={twJoin(
-              tw`text-md leading-5 font-semibold tracking-tight text-slate-800`,
+              tw`text-md leading-5 font-semibold tracking-tight text-on-neutral`,
               isEditing && tw`opacity-0`,
             )}
             ref={escapeRef}
@@ -188,7 +188,7 @@ const Item = ({ containerRef, id }: ItemProps) => {
               <TextInputField
                 aria-label='Workspace name'
                 className={tw`justify-self-start`}
-                inputClassName={tw`-mt-1 py-1 text-md leading-none font-semibold tracking-tight text-slate-800`}
+                inputClassName={tw`-mt-1 py-1 text-md leading-none font-semibold tracking-tight text-on-neutral`}
                 {...textFieldProps}
               />,
             )}
@@ -199,7 +199,7 @@ const Item = ({ containerRef, id }: ItemProps) => {
             </span>
             {updated && (
               <>
-                <div className={tw`size-0.5 rounded-full bg-slate-400`} />
+                <div className={tw`size-0.5 rounded-full bg-neutral-higher`} />
                 <span>
                   Updated <TimeAgo date={timestampDate(updated)} minPeriod={60} />
                 </span>
@@ -209,13 +209,13 @@ const Item = ({ containerRef, id }: ItemProps) => {
           <span>Files</span>
           <div className={tw`flex items-center gap-1`}>
             <CollectionIcon />
-            <strong className={tw`font-semibold text-slate-800`}>{fileCount}</strong>
+            <strong className={tw`font-semibold text-on-neutral`}>{fileCount}</strong>
           </div>
         </div>
 
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`ml-6 p-1`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
@@ -227,14 +227,14 @@ const Item = ({ containerRef, id }: ItemProps) => {
                   true,
                   <Dialog className={tw`flex flex-col p-5 outline-hidden`}>
                     <Heading
-                      className={tw`text-base leading-5 font-semibold tracking-tight text-slate-800`}
+                      className={tw`text-base leading-5 font-semibold tracking-tight text-on-neutral`}
                       slot='title'
                     >
                       Delete workspace?
                     </Heading>
 
-                    <div className={tw`mt-1 text-sm leading-5 font-medium tracking-tight text-slate-500`}>
-                      Are you sure you want to delete <span className={tw`text-slate-800`}>“{name}”</span>? This action
+                    <div className={tw`mt-1 text-sm leading-5 font-medium tracking-tight text-on-neutral-low`}>
+                      Are you sure you want to delete <span className={tw`text-on-neutral`}>“{name}”</span>? This action
                       cannot be undone.
                     </div>
 
diff --git a/packages/client/src/pages/flow/add-node.tsx b/packages/client/src/pages/flow/add-node.tsx
index 6fdf6f09a..70d70db11 100644
--- a/packages/client/src/pages/flow/add-node.tsx
+++ b/packages/client/src/pages/flow/add-node.tsx
@@ -75,17 +75,17 @@ export const SidebarHeader = ({ previous, title }: SidebarHeaderProps) => {
   const { setSidebar } = use(FlowContext);
 
   return (
-    <div className={tw`flex items-center gap-2 border-b border-slate-200 px-3 py-2`}>
+    <div className={tw`flex items-center gap-2 border-b border-neutral px-3 py-2`}>
       {previous && (
         <Button className={tw`p-1`} onPress={() => void setSidebar?.(previous)} variant='ghost'>
-          <FiArrowLeft className={tw`size-5 text-slate-500`} />
+          <FiArrowLeft className={tw`size-5 text-on-neutral-low`} />
         </Button>
       )}
 
-      <div className={tw`flex-1 leading-6 font-semibold tracking-tight text-slate-800`}>{title}</div>
+      <div className={tw`flex-1 leading-6 font-semibold tracking-tight text-on-neutral`}>{title}</div>
 
       <Button className={tw`p-1`} onPress={() => void setSidebar?.(null)} variant='ghost'>
-        <FiX className={tw`size-5 text-slate-500`} />
+        <FiX className={tw`size-5 text-on-neutral-low`} />
       </Button>
     </div>
   );
@@ -100,14 +100,16 @@ interface SidebarItemProps {
 
 export const SidebarItem = ({ description, icon, onAction, title }: SidebarItemProps) => (
   <ListBoxItem className={tw`gap-2 px-3 py-2`} onAction={onAction} textValue={title}>
-    <div className={tw`rounded-md border border-slate-200 bg-white p-1.5 text-xl text-slate-500`}>{icon}</div>
+    <div className={tw`rounded-md border border-neutral bg-neutral-lowest p-1.5 text-xl text-on-neutral-low`}>
+      {icon}
+    </div>
 
     <div className={tw`flex-1`}>
-      <div className={tw`text-md leading-5 font-semibold tracking-tight text-slate-800`}>{title}</div>
-      {description && <div className={tw`text-xs leading-4 tracking-tight text-slate-500`}>{description}</div>}
+      <div className={tw`text-md leading-5 font-semibold tracking-tight text-on-neutral`}>{title}</div>
+      {description && <div className={tw`text-xs leading-4 tracking-tight text-on-neutral-low`}>{description}</div>}
     </div>
 
-    <FiChevronRight className={tw`m-1 size-4 text-slate-500`} />
+    <FiChevronRight className={tw`m-1 size-4 text-on-neutral-low`} />
   </ListBoxItem>
 );
 
diff --git a/packages/client/src/pages/flow/edge.tsx b/packages/client/src/pages/flow/edge.tsx
index 7e6b819b2..b4172044e 100644
--- a/packages/client/src/pages/flow/edge.tsx
+++ b/packages/client/src/pages/flow/edge.tsx
@@ -136,8 +136,11 @@ const DefaultEdge = ({ id, sourcePosition, sourceX, sourceY, targetPosition, tar
           className={tw`nodrag nopan pointer-events-auto absolute`}
           style={{ transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)` }}
         >
-          <Button className={tw`rounded-full p-1`} onPress={() => void deleteElements({ edges: [{ id }] })}>
-            <FiX className={tw`size-3 text-red-700`} />
+          <Button
+            className={tw`rounded-full border-on-neutral p-1`}
+            onPress={() => void deleteElements({ edges: [{ id }] })}
+          >
+            <FiX className={tw`size-3 text-danger-high`} />
           </Button>
         </div>
       </XF.EdgeLabelRenderer>
@@ -153,11 +156,11 @@ const connectionLineStyles = tv({
   base: tw`fill-none stroke-1 transition-colors`,
   variants: {
     state: {
-      [FlowItemState.CANCELED]: tw`stroke-slate-400`,
-      [FlowItemState.FAILURE]: tw`stroke-red-600`,
-      [FlowItemState.RUNNING]: tw`stroke-violet-600`,
-      [FlowItemState.SUCCESS]: tw`stroke-green-600`,
-      [FlowItemState.UNSPECIFIED]: tw`stroke-slate-800`,
+      [FlowItemState.CANCELED]: tw`stroke-neutral-higher`,
+      [FlowItemState.FAILURE]: tw`stroke-danger`,
+      [FlowItemState.RUNNING]: tw`stroke-accent`,
+      [FlowItemState.SUCCESS]: tw`stroke-success`,
+      [FlowItemState.UNSPECIFIED]: tw`stroke-on-neutral`,
     } satisfies Record<FlowItemState, string>,
   },
 });
diff --git a/packages/client/src/pages/flow/edit.tsx b/packages/client/src/pages/flow/edit.tsx
index 05e69e709..094ccbb72 100644
--- a/packages/client/src/pages/flow/edit.tsx
+++ b/packages/client/src/pages/flow/edit.tsx
@@ -92,7 +92,7 @@ export const FlowEditPage = () => {
             <ActionBar />
 
             {sidebar && (
-              <XF.Panel className={tw`inset-y-0 w-80 border-l border-slate-200 bg-white`} position='top-right'>
+              <XF.Panel className={tw`inset-y-0 w-80 border-l border-neutral bg-neutral-lowest`} position='top-right'>
                 {sidebar}
               </XF.Panel>
             )}
@@ -224,7 +224,7 @@ export const Flow = ({ children }: PropsWithChildren) => {
     <>
       {statusBarEndSlot &&
         createPortal(
-          <div className={tw`flex gap-4 text-xs leading-none text-slate-800`}>
+          <div className={tw`flex gap-4 text-xs leading-none text-on-neutral`}>
             <NodeSelectionIndicator />
             {duration && <div>Time: {pipe(duration, Duration.millis, Duration.format)}</div>}
           </div>,
@@ -265,7 +265,7 @@ export const Flow = ({ children }: PropsWithChildren) => {
         viewport={viewport}
       >
         <XF.Background
-          className={tw`text-slate-300`}
+          className={tw`text-neutral-high`}
           color='currentColor'
           gap={20}
           size={2}
@@ -315,16 +315,16 @@ export const TopBar = ({ children }: TopBarProps) => {
   });
 
   return (
-    <div className={tw`flex items-center gap-2 border-b border-slate-200 bg-white px-3 py-2.5`}>
+    <div className={tw`flex items-center gap-2 border-b border-neutral bg-neutral-lowest px-3 py-2.5`}>
       {isEditing ? (
         <TextInputField
           aria-label='Flow name'
-          inputClassName={tw`-my-1 py-1 text-md leading-none font-medium tracking-tight text-slate-800`}
+          inputClassName={tw`-my-1 py-1 text-md leading-none font-medium tracking-tight text-on-neutral`}
           {...textFieldProps}
         />
       ) : (
         <AriaButton
-          className={tw`cursor-text text-md leading-5 font-medium tracking-tight text-slate-800`}
+          className={tw`cursor-text text-md leading-5 font-medium tracking-tight text-on-neutral`}
           onContextMenu={onContextMenu}
           onPress={() => void edit()}
         >
@@ -338,9 +338,8 @@ export const TopBar = ({ children }: TopBarProps) => {
 
       <ButtonAsRouteLink
         className={twJoin(
-          tw`px-1 py-0 text-slate-800`,
-          matchRoute({ to: router.routesById[routes.dashboard.workspace.flow.history.id].fullPath }) &&
-            tw`bg-slate-200`,
+          tw`px-1 py-0 text-on-neutral`,
+          matchRoute({ to: router.routesById[routes.dashboard.workspace.flow.history.id].fullPath }) && tw`bg-neutral`,
         )}
         params={{ flowIdCan, workspaceIdCan }}
         to={
@@ -350,12 +349,12 @@ export const TopBar = ({ children }: TopBarProps) => {
         }
         variant='ghost'
       >
-        <FiClock className={tw`size-4 text-slate-500`} /> Flows History
+        <FiClock className={tw`size-4 text-on-neutral-low`} /> Flows History
       </ButtonAsRouteLink>
 
       <MenuTrigger {...menuTriggerProps}>
-        <Button className={tw`bg-slate-200 p-0.5`} variant='ghost'>
-          <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+        <Button className={tw`bg-neutral p-0.5`} variant='ghost'>
+          <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
         </Button>
 
         <Menu {...menuProps}>
@@ -384,10 +383,10 @@ export const TopBarWithControls = () => {
         onPress={() => void zoomOut({ duration: 100 })}
         variant='ghost'
       >
-        <FiMinus className={tw`size-4 text-slate-500`} />
+        <FiMinus className={tw`size-4 text-on-neutral-low`} />
       </Button>
 
-      <div className={tw`w-10 text-center text-sm leading-5 font-medium tracking-tight text-gray-900`}>
+      <div className={tw`w-10 text-center text-sm leading-5 font-medium tracking-tight text-on-neutral`}>
         {Math.floor(zoom * 100)}%
       </div>
 
@@ -397,10 +396,10 @@ export const TopBarWithControls = () => {
         onPress={() => void zoomIn({ duration: 100 })}
         variant='ghost'
       >
-        <FiPlus className={tw`size-4 text-slate-500`} />
+        <FiPlus className={tw`size-4 text-on-neutral-low`} />
       </Button>
 
-      <div className={tw`h-4 w-px bg-slate-200`} />
+      <div className={tw`h-4 w-px bg-neutral`} />
     </TopBar>
   );
 };
@@ -422,12 +421,9 @@ const ActionBar = () => {
     ).data ?? create(FlowSchema);
 
   return (
-    <XF.Panel
-      className={tw`mb-4 flex items-center gap-2 rounded-lg bg-slate-900 p-1 shadow-sm`}
-      position='bottom-center'
-    >
+    <XF.Panel className={tw`mb-4 flex items-center gap-2 rounded-lg bg-inverse p-1 shadow-sm`} position='bottom-center'>
       <Button className={tw`px-1.5 py-1`} onPress={() => void setSidebar?.(<AddNodeSidebar />)} variant='ghost dark'>
-        <FiPlus className={tw`size-5 text-slate-300`} />
+        <FiPlus className={tw`size-5 text-on-inverse-low`} />
         Add Node
       </Button>
 
@@ -474,13 +470,13 @@ const FlowSettings = () => {
 
   return (
     <>
-      <div className={tw`sticky top-0 z-10 flex items-center border-b border-slate-200 bg-white px-5 py-2`}>
-        <div className={tw`text-sm leading-5 font-medium text-slate-800`}>Flow variables</div>
+      <div className={tw`sticky top-0 z-10 flex items-center border-b border-neutral bg-neutral-lowest px-5 py-2`}>
+        <div className={tw`text-sm leading-5 font-medium text-on-neutral`}>Flow variables</div>
 
         <div className={tw`flex-1`} />
 
         <Button className={tw`p-1`} slot='close' variant='ghost'>
-          <FiX className={tw`size-5 text-slate-500`} />
+          <FiX className={tw`size-5 text-on-neutral-low`} />
         </Button>
       </div>
 
@@ -581,7 +577,7 @@ const FlowSettings = () => {
               }}
               variant='ghost'
             >
-              <FiPlus className={tw`size-4 text-slate-500`} />
+              <FiPlus className={tw`size-4 text-on-neutral-low`} />
               New variable
             </Button>
           </TableFooter>
diff --git a/packages/client/src/pages/flow/handle.tsx b/packages/client/src/pages/flow/handle.tsx
index cbfc9f6fd..e85a4e763 100644
--- a/packages/client/src/pages/flow/handle.tsx
+++ b/packages/client/src/pages/flow/handle.tsx
@@ -94,21 +94,21 @@ export const Handle = ({
             >
               <div
                 className={twJoin(
-                  tw`h-12 w-16 bg-slate-800`,
+                  tw`h-12 w-16 bg-on-neutral`,
                   (position === XF.Position.Right || position === XF.Position.Left) && tw`h-px`,
                   (position === XF.Position.Top || position === XF.Position.Bottom) && tw`w-px`,
                 )}
               />
 
               <div className={tw`size-0`}>
-                <div className={tw`pointer-events-none size-1.5 -translate-1/2 rounded-full bg-slate-800`} />
+                <div className={tw`pointer-events-none size-1.5 -translate-1/2 rounded-full bg-on-neutral-low`} />
               </div>
 
               <button
                 className={focusVisibleRingStyles({
                   className: tw`
                     pointer-events-auto flex size-5 cursor-pointer items-center justify-center rounded-full border
-                    border-slate-800 bg-white
+                    border-on-neutral bg-neutral-lowest
                   `,
                 })}
                 onClick={() => {
@@ -135,7 +135,7 @@ export const Handle = ({
                   setSidebar?.(<Sidebar handleKind={kind} position={nodePosition} sourceId={nodeId} />);
                 }}
               >
-                <FiPlus className={tw`size-3 text-slate-800`} />
+                <FiPlus className={tw`size-3 text-on-neutral`} />
               </button>
             </div>
           )}
@@ -154,7 +154,8 @@ export const Handle = ({
         >
           <div
             className={tw`
-              mx-4 my-3 rounded-sm bg-white p-1 text-xs leading-4 tracking-tight whitespace-nowrap text-slate-500
+              mx-4 my-3 rounded-sm bg-neutral-lowest p-1 text-xs leading-4 tracking-tight whitespace-nowrap
+              text-on-neutral-low
             `}
           >
             {label}
@@ -165,7 +166,7 @@ export const Handle = ({
       <div className={tw`absolute size-10 min-h-0 min-w-0 -translate-1/2 rounded-full border-none bg-transparent`}>
         <div
           className={twJoin(
-            tw`absolute inset-0 m-auto bg-slate-800`,
+            tw`absolute inset-0 m-auto bg-on-neutral-low`,
             type === 'source' && tw`size-2 rounded-full`,
             type === 'target' && tw`size-2.5`,
           )}
@@ -176,5 +177,5 @@ export const Handle = ({
 };
 
 export const HandleHalo = () => (
-  <div className={tw`absolute size-5 -translate-1/2 rounded-full border border-slate-300 bg-slate-200 shadow-xs`} />
+  <div className={tw`absolute size-5 -translate-1/2 rounded-full border border-neutral-high bg-neutral shadow-xs`} />
 );
diff --git a/packages/client/src/pages/flow/history.tsx b/packages/client/src/pages/flow/history.tsx
index 1b64b5f5d..525fe209e 100644
--- a/packages/client/src/pages/flow/history.tsx
+++ b/packages/client/src/pages/flow/history.tsx
@@ -68,38 +68,38 @@ export const FlowHistoryPage = () => {
       <PanelResizeHandle direction='horizontal' />
 
       <Panel
-        className={tw`flex flex-col bg-slate-50 p-4 tracking-tight`}
+        className={tw`flex flex-col bg-neutral-lower p-4 tracking-tight`}
         defaultSize='20%'
         maxSize='40%'
         minSize='10%'
         style={{ overflowY: 'auto' }}
       >
         <div className={tw`mb-4`}>
-          <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-slate-800`}>Flow History</div>
-          <div className={tw`text-xs leading-4 text-slate-500`}>History of your flow responses</div>
+          <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-on-neutral`}>Flow History</div>
+          <div className={tw`text-xs leading-4 text-on-neutral-low`}>History of your flow responses</div>
         </div>
         <div className={tw`grid grid-cols-[auto_1fr] gap-x-0.5`}>
           <div className={tw`flex flex-col items-center gap-0.5`}>
             <div className={tw`flex-1`} />
-            <div className={tw`size-2 rounded-full border border-violet-700 p-px`}>
+            <div className={tw`size-2 rounded-full border border-accent p-px`}>
               <div className={tw`size-full rounded-full border border-inherit`} />
             </div>
-            <div className={tw`w-px flex-1 bg-slate-200`} />
+            <div className={tw`w-px flex-1 bg-neutral`} />
           </div>
 
-          <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-violet-700`}>Current Version</div>
+          <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-accent`}>Current Version</div>
 
           <div className={tw`flex flex-col items-center gap-0.5`}>
-            <div className={tw`w-px flex-1 bg-slate-200`} />
-            <div className={tw`size-2 rounded-full bg-slate-300`} />
-            <div className={tw`w-px flex-1 bg-slate-200`} />
+            <div className={tw`w-px flex-1 bg-neutral`} />
+            <div className={tw`size-2 rounded-full bg-neutral-high`} />
+            <div className={tw`w-px flex-1 bg-neutral`} />
           </div>
 
-          <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-slate-800`}>
+          <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-on-neutral`}>
             {versions.length} previous responses
           </div>
 
-          <div className={tw`mb-2 w-px flex-1 justify-self-center bg-slate-200`} />
+          <div className={tw`mb-2 w-px flex-1 justify-self-center bg-neutral`} />
 
           <div ref={tabListRef} {...tabListProps}>
             {[...state.collection].map((item) => (
@@ -128,9 +128,10 @@ const Tab = ({ item, state }: TabProps) => {
       className={twJoin(
         tabProps.className,
         tw`
-          flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 font-semibold text-slate-800
+          flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5 font-semibold
+          text-on-neutral
         `,
-        isSelected && tw`bg-slate-200`,
+        isSelected && tw`bg-neutral`,
       )}
       ref={ref}
     >
diff --git a/packages/client/src/pages/flow/node.tsx b/packages/client/src/pages/flow/node.tsx
index e013c4e59..518832d47 100644
--- a/packages/client/src/pages/flow/node.tsx
+++ b/packages/client/src/pages/flow/node.tsx
@@ -148,16 +148,17 @@ export const useNodesState = () => {
 
 const nodeBodyStyles = tv({
   base: tw`
-    relative size-16 overflow-clip rounded-xl border-2 border-white bg-white outline outline-slate-800 transition-colors
+    relative size-16 overflow-clip rounded-xl border-2 border-neutral-lowest bg-neutral-lowest outline
+    outline-on-neutral transition-colors
   `,
   variants: {
-    selected: { true: tw`bg-slate-200` },
+    selected: { true: tw`bg-neutral` },
     state: {
-      [FlowItemState.CANCELED]: tw`outline-slate-300`,
-      [FlowItemState.FAILURE]: tw`outline-red-600`,
-      [FlowItemState.RUNNING]: tw`outline-violet-600`,
-      [FlowItemState.SUCCESS]: tw`outline-green-600`,
-      [FlowItemState.UNSPECIFIED]: tw`outline-slate-800`,
+      [FlowItemState.CANCELED]: tw`outline-neutral-high`,
+      [FlowItemState.FAILURE]: tw`outline-danger`,
+      [FlowItemState.RUNNING]: tw`outline-accent`,
+      [FlowItemState.SUCCESS]: tw`outline-success`,
+      [FlowItemState.UNSPECIFIED]: tw`outline-on-neutral`,
     } satisfies Record<FlowItemState, string>,
   },
 });
@@ -221,11 +222,11 @@ export const NodeStateIndicator = ({ children, nodeId }: NodeStateIndicatorProps
   let indicator = pipe(
     Match.value(state),
     Match.when(FlowItemState.RUNNING, () => (
-      <TbRefresh className={tw`size-5 animate-spin text-violet-600`} style={{ animationDirection: 'reverse' }} />
+      <TbRefresh className={tw`size-5 animate-spin text-accent`} style={{ animationDirection: 'reverse' }} />
     )),
-    Match.when(FlowItemState.SUCCESS, () => <CheckIcon className={tw`size-5 text-green-600`} />),
-    Match.when(FlowItemState.CANCELED, () => <TbCancel className={tw`size-5 text-slate-600`} />),
-    Match.when(FlowItemState.FAILURE, () => <TbAlertTriangle className={tw`size-5 text-red-600`} />),
+    Match.when(FlowItemState.SUCCESS, () => <CheckIcon className={tw`size-5 text-success`} />),
+    Match.when(FlowItemState.CANCELED, () => <TbCancel className={tw`size-5 text-on-neutral-low`} />),
+    Match.when(FlowItemState.FAILURE, () => <TbAlertTriangle className={tw`size-5 text-danger`} />),
     Match.orElse(() => children),
   );
 
@@ -233,7 +234,7 @@ export const NodeStateIndicator = ({ children, nodeId }: NodeStateIndicatorProps
     indicator = (
       <TooltipTrigger delay={750}>
         <AriaButton className={tw`pointer-events-auto block cursor-help`}>{indicator}</AriaButton>
-        <Tooltip className={tw`max-w-lg rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>{info}</Tooltip>
+        <Tooltip className={tw`max-w-lg rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>{info}</Tooltip>
       </TooltipTrigger>
     );
 
@@ -248,7 +249,7 @@ interface NodeTitleProps {
 export const NodeTitle = ({ children, className }: NodeTitleProps) => (
   <div
     className={twMerge(
-      tw`flex items-center gap-1 text-xs leading-4 font-semibold tracking-tight text-slate-800`,
+      tw`flex items-center gap-1 text-xs leading-4 font-semibold tracking-tight text-on-neutral`,
       className,
     )}
   >
@@ -283,7 +284,7 @@ export const NodeName = ({ className, nodeId }: NodeNameProps) => {
     <div className={tw`relative`}>
       <AriaButton
         className={twMerge(
-          tw`pointer-events-auto block cursor-text text-xs tracking-tight text-slate-500`,
+          tw`pointer-events-auto block cursor-text text-xs tracking-tight text-on-neutral-low`,
           isEditing && tw`opacity-0`,
           className,
         )}
@@ -295,7 +296,7 @@ export const NodeName = ({ className, nodeId }: NodeNameProps) => {
       {isEditing && (
         <TextInputField
           aria-label='New node name'
-          inputClassName={tw`absolute top-0 left-0 w-24 bg-white px-1 py-0 text-xs`}
+          inputClassName={tw`absolute top-0 left-0 w-24 bg-neutral-lowest px-1 py-0 text-xs`}
           {...textFieldProps}
         />
       )}
@@ -362,10 +363,10 @@ export const NodeSettingsContainer = ({
 
   return (
     <div className={tw`flex h-full flex-col`}>
-      <div className={tw`flex items-center gap-4 border-b border-slate-200 bg-white px-5 py-2`}>
+      <div className={tw`flex items-center gap-4 border-b border-neutral bg-neutral-lowest px-5 py-2`}>
         <div className='min-w-0'>
-          <div className={tw`text-md leading-5 text-slate-400`}>{name}</div>
-          <div className={tw`truncate text-sm leading-5 font-medium text-slate-800`}>{title}</div>
+          <div className={tw`text-md leading-5 text-neutral-higher`}>{name}</div>
+          <div className={tw`truncate text-sm leading-5 font-medium text-on-neutral`}>{title}</div>
         </div>
 
         <NodeStateIndicator nodeId={nodeId} />
@@ -377,7 +378,7 @@ export const NodeSettingsContainer = ({
         <div className={tw`w-4`} />
 
         <Button className={tw`p-1`} slot='close' variant='ghost'>
-          <FiX className={tw`size-5 text-slate-500`} />
+          <FiX className={tw`size-5 text-on-neutral-low`} />
         </Button>
       </div>
 
@@ -469,7 +470,7 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
       <PanelGroup {...nodeSettingsLayout} className={tw`flex-1`} orientation='horizontal'>
         <Panel className={tw`flex min-h-0 flex-col`} defaultSize='30%' maxSize='40%' minSize='10%'>
           <div
-            className={tw`border-b border-slate-200 p-5 text-base leading-5 font-semibold tracking-tight text-slate-800`}
+            className={tw`border-b border-neutral p-5 text-base leading-5 font-semibold tracking-tight text-on-neutral`}
           >
             Input
           </div>
@@ -477,10 +478,10 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
             {!selectedExecutionId ? (
               <div className={tw`flex flex-col items-center py-14 text-center`}>
                 <SearchEmptyIllustration />
-                <div className={tw`mt-4 text-sm leading-5 font-semibold tracking-tight text-slate-800`}>
+                <div className={tw`mt-4 text-sm leading-5 font-semibold tracking-tight text-on-neutral`}>
                   No input data yet
                 </div>
-                <div className={tw`w-48 text-md leading-4 tracking-tight text-slate-500`}>
+                <div className={tw`w-48 text-md leading-4 tracking-tight text-on-neutral-low`}>
                   The executed result from previous nodes will appear here
                 </div>
               </div>
@@ -497,8 +498,8 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
         <Panel className={tw`flex min-h-0 flex-col`} defaultSize='40%' maxSize='60%' minSize='10%'>
           <div
             className={tw`
-              flex items-center justify-between border-b border-slate-200 p-5 text-base leading-5 font-semibold
-              tracking-tight text-slate-800
+              flex items-center justify-between border-b border-neutral p-5 text-base leading-5 font-semibold
+              tracking-tight text-on-neutral
             `}
           >
             <span>Settings</span>
@@ -512,7 +513,7 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
 
         <Panel className={tw`flex min-h-0 flex-col`} defaultSize='30%' maxSize='40%' minSize='10%'>
           <div
-            className={tw`border-b border-slate-200 p-5 text-base leading-5 font-semibold tracking-tight text-slate-800`}
+            className={tw`border-b border-neutral p-5 text-base leading-5 font-semibold tracking-tight text-on-neutral`}
           >
             Output
           </div>
@@ -521,10 +522,10 @@ export const NodeSettingsBody = ({ children, input, nodeId, output, settingsHead
             {!selectedExecutionId ? (
               <div className={tw`flex flex-col items-center py-14 text-center`}>
                 <SearchEmptyIllustration />
-                <div className={tw`mt-4 text-sm leading-5 font-semibold tracking-tight text-slate-800`}>
+                <div className={tw`mt-4 text-sm leading-5 font-semibold tracking-tight text-on-neutral`}>
                   No output data yet
                 </div>
-                <div className={tw`w-48 text-md leading-4 tracking-tight text-slate-500`}>
+                <div className={tw`w-48 text-md leading-4 tracking-tight text-on-neutral-low`}>
                   The executed result from this node will appear here
                 </div>
               </div>
diff --git a/packages/client/src/pages/flow/nodes/ai.tsx b/packages/client/src/pages/flow/nodes/ai.tsx
index dbdfb90c8..76865b953 100644
--- a/packages/client/src/pages/flow/nodes/ai.tsx
+++ b/packages/client/src/pages/flow/nodes/ai.tsx
@@ -344,7 +344,7 @@ export const AiProviderSettings = ({ nodeId }: NodeSettingsProps) => {
                     params={{ credentialIdCan: Ulid.construct(data.credentialId).toCanonical() }}
                     to={router.routesById[routes.dashboard.workspace.credential.id].fullPath}
                   >
-                    <FiExternalLink className={tw`size-4 text-slate-500`} />
+                    <FiExternalLink className={tw`size-4 text-on-neutral-low`} />
                     Open
                   </ButtonAsRouteLink>
                 )}
@@ -412,7 +412,7 @@ export const AiProviderSettings = ({ nodeId }: NodeSettingsProps) => {
                   }}
                   variant='ghost'
                 >
-                  <FiPlus className={tw`size-4 text-slate-500`} />
+                  <FiPlus className={tw`size-4 text-on-neutral-low`} />
                   New {credentialKindTitle} credential
                 </Button>
 
diff --git a/packages/client/src/pages/flow/nodes/http.tsx b/packages/client/src/pages/flow/nodes/http.tsx
index 0bf40da4e..4e335b57f 100644
--- a/packages/client/src/pages/flow/nodes/http.tsx
+++ b/packages/client/src/pages/flow/nodes/http.tsx
@@ -51,7 +51,7 @@ export const HttpNode = ({ id, selected }: XF.NodeProps) => {
 
   return (
     <SimpleNode
-      className={tw`w-48 text-violet-600`}
+      className={tw`w-48 text-accent`}
       handles={
         <>
           <Handle nodeId={nodeId} position={XF.Position.Left} type='target' />
@@ -66,7 +66,7 @@ export const HttpNode = ({ id, selected }: XF.NodeProps) => {
       <div className={tw`min-w-0 flex-1`}>
         <MethodBadge className={tw`border`} method={method ?? HttpMethod.UNSPECIFIED} />
 
-        <div className={tw`truncate text-xs tracking-tight text-slate-500`}>{name}</div>
+        <div className={tw`truncate text-xs tracking-tight text-on-neutral-low`}>{name}</div>
       </div>
     </SimpleNode>
   );
@@ -117,7 +117,7 @@ export const HttpSettings = ({ nodeId }: NodeSettingsProps) => {
                 to: router.routesById[routes.dashboard.workspace.http.route.id].fullPath,
               })}
         >
-          <FiExternalLink className={tw`size-4 text-slate-500`} />
+          <FiExternalLink className={tw`size-4 text-on-neutral-low`} />
           Open API
         </ButtonAsLink>
       }
diff --git a/packages/client/src/pages/flow/nodes/javascript.tsx b/packages/client/src/pages/flow/nodes/javascript.tsx
index cde30f896..1a17032b5 100644
--- a/packages/client/src/pages/flow/nodes/javascript.tsx
+++ b/packages/client/src/pages/flow/nodes/javascript.tsx
@@ -8,6 +8,7 @@ import { FiTerminal } from 'react-icons/fi';
 import { NodeJsSchema } from '@the-dev-tools/spec/buf/api/flow/v1/flow_pb';
 import { NodeJsCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/flow';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { useCodeMirrorLanguageExtensions } from '~/features/expression';
 import { useApiCollection } from '~/shared/api';
 import { pick } from '~/shared/lib';
@@ -36,6 +37,8 @@ export const JavaScriptNode = ({ id, selected }: XF.NodeProps) => {
 };
 
 export const JavaScriptSettings = ({ nodeId }: NodeSettingsProps) => {
+  const { theme } = useTheme();
+
   const collection = useApiCollection(NodeJsCollectionSchema);
 
   const { code } =
@@ -59,6 +62,7 @@ export const JavaScriptSettings = ({ nodeId }: NodeSettingsProps) => {
         height='100%'
         onChange={(_) => collection.utils.updatePaced({ code: _, nodeId })}
         readOnly={isReadOnly}
+        theme={theme}
         value={code}
       />
     </NodeSettingsBody>
diff --git a/packages/client/src/pages/flow/nodes/manual-start.tsx b/packages/client/src/pages/flow/nodes/manual-start.tsx
index 670990f1d..b6934b8a6 100644
--- a/packages/client/src/pages/flow/nodes/manual-start.tsx
+++ b/packages/client/src/pages/flow/nodes/manual-start.tsx
@@ -15,7 +15,7 @@ export const ManualStartNode = ({ id, selected }: XF.NodeProps) => {
       handles={
         <>
           <div className={tw`absolute top-1/2 -translate-x-full -translate-y-1/2 p-1`}>
-            <FiZap className={tw`size-5 text-violet-600`} />
+            <FiZap className={tw`size-5 text-accent`} />
           </div>
 
           <Handle nodeId={nodeId} position={XF.Position.Right} type='source' />
diff --git a/packages/client/src/pages/flow/tab.tsx b/packages/client/src/pages/flow/tab.tsx
index 7b16a949d..908eb236b 100644
--- a/packages/client/src/pages/flow/tab.tsx
+++ b/packages/client/src/pages/flow/tab.tsx
@@ -37,7 +37,7 @@ export const FlowTab = ({ flowId }: FlowTabProps) => {
 
   return (
     <>
-      <FlowsIcon className={tw`size-5 shrink-0 text-slate-500`} />
+      <FlowsIcon className={tw`size-5 shrink-0 text-on-neutral-low`} />
       <span className={tw`min-w-0 flex-1 truncate`}>{flow?.name}</span>
     </>
   );
diff --git a/packages/client/src/pages/http/history.tsx b/packages/client/src/pages/http/history.tsx
index 7e5778260..2aea5655f 100644
--- a/packages/client/src/pages/http/history.tsx
+++ b/packages/client/src/pages/http/history.tsx
@@ -37,35 +37,33 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => {
     <Modal isDismissable size='lg'>
       <Dialog className={tw`size-full outline-hidden`}>
         <Tabs className={tw`flex h-full`} orientation='vertical'>
-          <div className={tw`flex w-64 flex-col border-r border-slate-200 bg-slate-50 p-4 tracking-tight`}>
+          <div className={tw`flex w-64 flex-col border-r border-neutral bg-neutral-lower p-4 tracking-tight`}>
             <div className={tw`mb-4`}>
-              <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-slate-800`}>Response History</div>
-              <div className={tw`text-xs leading-4 text-slate-500`}>History of your API response</div>
+              <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-on-neutral`}>Response History</div>
+              <div className={tw`text-xs leading-4 text-on-neutral-low`}>History of your API response</div>
             </div>
             <div className={tw`grid min-h-0 grid-cols-[auto_1fr] gap-x-0.5`}>
               <div className={tw`flex flex-col items-center gap-0.5`}>
                 <div className={tw`flex-1`} />
-                <div className={tw`size-2 rounded-full border border-violet-700 p-px`}>
+                <div className={tw`size-2 rounded-full border border-accent p-px`}>
                   <div className={tw`size-full rounded-full border border-inherit`} />
                 </div>
-                <div className={tw`w-px flex-1 bg-slate-200`} />
+                <div className={tw`w-px flex-1 bg-neutral`} />
               </div>
 
-              <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-violet-700`}>
-                Current Version
-              </div>
+              <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-accent`}>Current Version</div>
 
               <div className={tw`flex flex-col items-center gap-0.5`}>
-                <div className={tw`w-px flex-1 bg-slate-200`} />
-                <div className={tw`size-2 rounded-full bg-slate-300`} />
-                <div className={tw`w-px flex-1 bg-slate-200`} />
+                <div className={tw`w-px flex-1 bg-neutral`} />
+                <div className={tw`size-2 rounded-full bg-neutral-high`} />
+                <div className={tw`w-px flex-1 bg-neutral`} />
               </div>
 
-              <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-slate-800`}>
+              <div className={tw`p-2 text-md leading-5 font-semibold tracking-tight text-on-neutral`}>
                 {versions.length} previous responses
               </div>
 
-              <div className={tw`mb-2 w-px flex-1 justify-self-center bg-slate-200`} />
+              <div className={tw`mb-2 w-px flex-1 justify-self-center bg-neutral`} />
 
               <TabList className={tw`overflow-auto`} items={versions}>
                 {(_) => (
@@ -74,9 +72,9 @@ export const HistoryModal = ({ deltaHttpId, httpId }: HistoryModalProps) => {
                       twJoin(
                         tw`
                           flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-md leading-5
-                          font-semibold text-slate-800
+                          font-semibold text-on-neutral
                         `,
-                        isSelected && tw`bg-slate-200`,
+                        isSelected && tw`bg-neutral`,
                       )
                     }
                     id={collection.utils.getKey(_)}
diff --git a/packages/client/src/pages/http/request/assert.tsx b/packages/client/src/pages/http/request/assert.tsx
index 471f0c601..4722a21ca 100644
--- a/packages/client/src/pages/http/request/assert.tsx
+++ b/packages/client/src/pages/http/request/assert.tsx
@@ -101,7 +101,7 @@ export const AssertTable = ({ deltaHttpId, httpId, isReadOnly = false }: AssertT
             }}
             variant='ghost'
           >
-            <FiPlus className={tw`size-4 text-slate-500`} />
+            <FiPlus className={tw`size-4 text-on-neutral-low`} />
             New assertion
           </Button>
         </TableFooter>
diff --git a/packages/client/src/pages/http/request/body/form-data.tsx b/packages/client/src/pages/http/request/body/form-data.tsx
index 248606385..214b52bca 100644
--- a/packages/client/src/pages/http/request/body/form-data.tsx
+++ b/packages/client/src/pages/http/request/body/form-data.tsx
@@ -129,7 +129,7 @@ export const BodyFormDataTable = ({
             }}
             variant='ghost'
           >
-            <FiPlus className={tw`size-4 text-slate-500`} />
+            <FiPlus className={tw`size-4 text-on-neutral-low`} />
             New body item
           </Button>
         </TableFooter>
diff --git a/packages/client/src/pages/http/request/body/raw.tsx b/packages/client/src/pages/http/request/body/raw.tsx
index 860e64995..bc4c91c30 100644
--- a/packages/client/src/pages/http/request/body/raw.tsx
+++ b/packages/client/src/pages/http/request/body/raw.tsx
@@ -9,6 +9,7 @@ import {
 import { Button } from '@the-dev-tools/ui/button';
 import { Select, SelectItem } from '@the-dev-tools/ui/select';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { DeltaResetButton, useDeltaState } from '~/features/delta';
 import {
   baseCodeMirrorExtensions,
@@ -29,6 +30,8 @@ export interface RawFormProps {
 }
 
 export const RawForm = ({ deltaHttpId, httpId, isReadOnly = false }: RawFormProps) => {
+  const { theme } = useTheme();
+
   const { transport } = routes.root.useRouteContext();
 
   const deltaOptions = {
@@ -94,6 +97,7 @@ export const RawForm = ({ deltaHttpId, httpId, isReadOnly = false }: RawFormProp
         height='100%'
         onChange={(_) => void setValue(_)}
         readOnly={isReadOnly}
+        theme={theme}
         value={value ?? ''}
       />
     </>
diff --git a/packages/client/src/pages/http/request/body/url-encoded.tsx b/packages/client/src/pages/http/request/body/url-encoded.tsx
index 9120c87c4..b83c6cdd8 100644
--- a/packages/client/src/pages/http/request/body/url-encoded.tsx
+++ b/packages/client/src/pages/http/request/body/url-encoded.tsx
@@ -129,7 +129,7 @@ export const BodyUrlEncodedTable = ({
             }}
             variant='ghost'
           >
-            <FiPlus className={tw`size-4 text-slate-500`} />
+            <FiPlus className={tw`size-4 text-on-neutral-low`} />
             New body item
           </Button>
         </TableFooter>
diff --git a/packages/client/src/pages/http/request/header.tsx b/packages/client/src/pages/http/request/header.tsx
index 0f2ad0c6d..2c85e5fba 100644
--- a/packages/client/src/pages/http/request/header.tsx
+++ b/packages/client/src/pages/http/request/header.tsx
@@ -124,7 +124,7 @@ export const HeaderTable = ({ deltaHttpId, hideDescription = false, httpId, isRe
             }}
             variant='ghost'
           >
-            <FiPlus className={tw`size-4 text-slate-500`} />
+            <FiPlus className={tw`size-4 text-on-neutral-low`} />
             New header
           </Button>
         </TableFooter>
diff --git a/packages/client/src/pages/http/request/panel.tsx b/packages/client/src/pages/http/request/panel.tsx
index 1ffad763f..36add9218 100644
--- a/packages/client/src/pages/http/request/panel.tsx
+++ b/packages/client/src/pages/http/request/panel.tsx
@@ -107,21 +107,21 @@ export const HttpRequestPanel = ({
 
   return (
     <Tabs className={twMerge(tw`flex flex-1 flex-col gap-6 overflow-auto p-6 pt-4`, className)}>
-      <TabList className={tw`flex gap-3 border-b border-slate-200`}>
+      <TabList className={tw`flex gap-3 border-b border-neutral`}>
         <Tab
           className={({ isSelected }) =>
             twMerge(
               tw`
                 -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight
-                text-slate-500 transition-colors
+                text-on-neutral-low transition-colors
               `,
-              isSelected && tw`border-b-violet-700 text-slate-800`,
+              isSelected && tw`border-b-accent text-on-neutral`,
             )
           }
           id='params'
         >
           Search Params
-          {searchParamCount > 0 && <span className={tw`text-xs text-green-600`}> ({searchParamCount})</span>}
+          {searchParamCount > 0 && <span className={tw`text-xs text-success`}> ({searchParamCount})</span>}
         </Tab>
 
         <Tab
@@ -129,15 +129,15 @@ export const HttpRequestPanel = ({
             twMerge(
               tw`
                 -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight
-                text-slate-500 transition-colors
+                text-on-neutral-low transition-colors
               `,
-              isSelected && tw`border-b-violet-700 text-slate-800`,
+              isSelected && tw`border-b-accent text-on-neutral`,
             )
           }
           id='headers'
         >
           Headers
-          {headerCount > 0 && <span className={tw`text-xs text-green-600`}> ({headerCount})</span>}
+          {headerCount > 0 && <span className={tw`text-xs text-success`}> ({headerCount})</span>}
         </Tab>
 
         <Tab
@@ -145,19 +145,19 @@ export const HttpRequestPanel = ({
             twMerge(
               tw`
                 -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight
-                text-slate-500 transition-colors
+                text-on-neutral-low transition-colors
               `,
-              isSelected && tw`border-b-violet-700 text-slate-800`,
+              isSelected && tw`border-b-accent text-on-neutral`,
             )
           }
           id='body'
         >
           Body
           {bodyKind === HttpBodyKind.FORM_DATA && bodyFormDataCount > 0 && (
-            <span className={tw`text-xs text-green-600`}> ({bodyFormDataCount})</span>
+            <span className={tw`text-xs text-success`}> ({bodyFormDataCount})</span>
           )}
           {bodyKind === HttpBodyKind.URL_ENCODED && bodyUrlEncodedCount > 0 && (
-            <span className={tw`text-xs text-green-600`}> ({bodyUrlEncodedCount})</span>
+            <span className={tw`text-xs text-success`}> ({bodyUrlEncodedCount})</span>
           )}
         </Tab>
 
@@ -166,15 +166,15 @@ export const HttpRequestPanel = ({
             twMerge(
               tw`
                 -mb-px cursor-pointer border-b-2 border-transparent py-1.5 text-md leading-5 font-medium tracking-tight
-                text-slate-500 transition-colors
+                text-on-neutral-low transition-colors
               `,
-              isSelected && tw`border-b-violet-700 text-slate-800`,
+              isSelected && tw`border-b-accent text-on-neutral`,
             )
           }
           id='assertions'
         >
           Assertion
-          {assertCount > 0 && <span className={tw`text-xs text-green-600`}> ({assertCount})</span>}
+          {assertCount > 0 && <span className={tw`text-xs text-success`}> ({assertCount})</span>}
         </Tab>
       </TabList>
 
diff --git a/packages/client/src/pages/http/request/search-param.tsx b/packages/client/src/pages/http/request/search-param.tsx
index 0f9ff29cb..0dde67618 100644
--- a/packages/client/src/pages/http/request/search-param.tsx
+++ b/packages/client/src/pages/http/request/search-param.tsx
@@ -129,7 +129,7 @@ export const SearchParamTable = ({
             }}
             variant='ghost'
           >
-            <FiPlus className={tw`size-4 text-slate-500`} />
+            <FiPlus className={tw`size-4 text-on-neutral-low`} />
             New search param
           </Button>
         </TableFooter>
diff --git a/packages/client/src/pages/http/request/top-bar.tsx b/packages/client/src/pages/http/request/top-bar.tsx
index 0c3679f91..030fed639 100644
--- a/packages/client/src/pages/http/request/top-bar.tsx
+++ b/packages/client/src/pages/http/request/top-bar.tsx
@@ -55,10 +55,10 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => {
 
   return (
     <>
-      <div className='flex items-center gap-2 border-b border-slate-200 px-4 py-2.5'>
+      <div className='flex items-center gap-2 border-b border-neutral px-4 py-2.5'>
         <div
           className={tw`
-            flex min-w-0 flex-1 gap-1 text-md leading-5 font-medium tracking-tight text-slate-400 select-none
+            flex min-w-0 flex-1 gap-1 text-md leading-5 font-medium tracking-tight text-neutral-higher select-none
           `}
         >
           {/* {example.breadcrumbs.map((_, index) => {
@@ -76,12 +76,12 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => {
           {isEditing ? (
             <TextInputField
               aria-label='Example name'
-              inputClassName={tw`-my-1 py-1 leading-none text-slate-800`}
+              inputClassName={tw`-my-1 py-1 leading-none text-on-neutral`}
               {...textFieldProps}
             />
           ) : (
             <AriaButton
-              className={tw`max-w-full cursor-text truncate text-slate-800`}
+              className={tw`max-w-full cursor-text truncate text-on-neutral`}
               onContextMenu={onContextMenu}
               onPress={() => void edit()}
             >
@@ -93,8 +93,8 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => {
         </div>
 
         <DialogTrigger>
-          <Button className={tw`px-2 py-1 text-slate-800`} variant='ghost'>
-            <FiClock className={tw`size-4 text-slate-500`} /> Response History
+          <Button className={tw`px-2 py-1 text-on-neutral`} variant='ghost'>
+            <FiClock className={tw`size-4 text-on-neutral-low`} /> Response History
           </Button>
 
           <HistoryModal deltaHttpId={deltaHttpId} httpId={httpId} />
@@ -102,7 +102,7 @@ export const HttpTopBar = ({ deltaHttpId, httpId }: HttpTopBarProps) => {
 
         <MenuTrigger {...menuTriggerProps}>
           <Button className={tw`p-1`} variant='ghost'>
-            <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+            <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
           </Button>
 
           <Menu {...menuProps}>
diff --git a/packages/client/src/pages/http/request/url.tsx b/packages/client/src/pages/http/request/url.tsx
index d5031ed19..3202df759 100644
--- a/packages/client/src/pages/http/request/url.tsx
+++ b/packages/client/src/pages/http/request/url.tsx
@@ -142,7 +142,7 @@ export const HttpUrl = ({ deltaHttpId, httpId, isReadOnly = false }: HttpUrlProp
   };
 
   return (
-    <div className={tw`flex flex-1 items-center gap-3 rounded-lg border border-slate-300 px-3 py-2 shadow-xs`}>
+    <div className={tw`flex flex-1 items-center gap-3 rounded-lg border border-neutral px-3 py-2 shadow-xs`}>
       <Select
         aria-label='Method'
         isDisabled={isReadOnly}
diff --git a/packages/client/src/pages/http/response/assert.tsx b/packages/client/src/pages/http/response/assert.tsx
index fc739f2c8..b93902e54 100644
--- a/packages/client/src/pages/http/response/assert.tsx
+++ b/packages/client/src/pages/http/response/assert.tsx
@@ -27,8 +27,8 @@ export const AssertTable = ({ httpResponseId }: AssertTableProps) => {
         <Fragment key={collection.utils.getKey(_)}>
           <div
             className={twJoin(
-              tw`rounded-sm px-2 py-1 text-center font-light text-white uppercase`,
-              _.success ? tw`bg-green-600` : tw`bg-red-600`,
+              tw`rounded-sm px-2 py-1 text-center font-light text-on-inverse uppercase`,
+              _.success ? tw`bg-success` : tw`bg-danger`,
             )}
           >
             {_.success ? 'Pass' : 'Fail'}
diff --git a/packages/client/src/pages/http/response/body.tsx b/packages/client/src/pages/http/response/body.tsx
index b7c49d378..57efc3881 100644
--- a/packages/client/src/pages/http/response/body.tsx
+++ b/packages/client/src/pages/http/response/body.tsx
@@ -9,6 +9,7 @@ import { HttpResponseSchema } from '@the-dev-tools/spec/buf/api/http/v1/http_pb'
 import { HttpResponseCollectionSchema } from '@the-dev-tools/spec/tanstack-db/v1/api/http';
 import { Select, SelectItem } from '@the-dev-tools/ui/select';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import {
   CodeMirrorMarkupLanguage,
   CodeMirrorMarkupLanguages,
@@ -38,15 +39,20 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => {
 
   return (
     <Tabs
-      className='grid flex-1 grid-cols-[auto_1fr] grid-rows-[auto_1fr] items-start gap-4'
+      className={tw`grid flex-1 grid-cols-[auto_1fr] grid-rows-[auto_1fr] items-start gap-4`}
       defaultSelectedKey='pretty'
     >
-      <TabList className='flex gap-1 self-start rounded-md border border-slate-100 bg-slate-100 p-0.5 text-xs leading-5 tracking-tight'>
+      <TabList
+        className={tw`
+          flex gap-1 self-start rounded-md border border-neutral-lower bg-neutral-lower p-0.5 text-xs leading-5
+          tracking-tight
+        `}
+      >
         <Tab
           className={({ isSelected }) =>
             twMerge(
-              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`,
-              isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`,
+              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-neutral-higher transition-colors`,
+              isSelected && tw`bg-neutral-lowest font-medium text-on-neutral shadow-sm`,
             )
           }
           id='pretty'
@@ -56,8 +62,8 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => {
         <Tab
           className={({ isSelected }) =>
             twMerge(
-              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`,
-              isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`,
+              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-neutral-higher transition-colors`,
+              isSelected && tw`bg-neutral-lowest font-medium text-on-neutral shadow-sm`,
             )
           }
           id='raw'
@@ -67,8 +73,8 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => {
         <Tab
           className={({ isSelected }) =>
             twMerge(
-              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-slate-400 transition-colors`,
-              isSelected && tw`bg-white font-medium text-slate-800 shadow-sm`,
+              tw`cursor-pointer rounded-sm bg-transparent px-2 py-0.5 text-neutral-higher transition-colors`,
+              isSelected && tw`bg-neutral-lowest font-medium text-on-neutral shadow-sm`,
             )
           }
           id='preview'
@@ -77,7 +83,7 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => {
         </Tab>
       </TabList>
 
-      <TabPanel className='contents' id='pretty'>
+      <TabPanel className={tw`contents`} id='pretty'>
         <BodyPretty body={body} />
       </TabPanel>
 
@@ -85,8 +91,8 @@ export const BodyPanel = ({ httpResponseId }: BodyPanelProps) => {
         {body}
       </TabPanel>
 
-      <TabPanel className='col-span-full self-stretch' id='preview'>
-        <iframe className='size-full' srcDoc={body} title='Response preview' />
+      <TabPanel className={tw`col-span-full self-stretch`} id='preview'>
+        <iframe className={tw`size-full bg-white`} srcDoc={body} title='Response preview' />
       </TabPanel>
     </Tabs>
   );
@@ -97,6 +103,8 @@ interface BodyPrettyProps {
 }
 
 const BodyPretty = ({ body }: BodyPrettyProps) => {
+  const { theme } = useTheme();
+
   const [language, setLanguage] = useState(guessLanguage(body));
   const { data: prettierBody } = useQuery(prettierFormatQueryOptions({ language, text: body }));
   const extensions = useCodeMirrorLanguageExtensions(language);
@@ -105,7 +113,7 @@ const BodyPretty = ({ body }: BodyPrettyProps) => {
     <>
       <Select
         aria-label='Language'
-        className='self-center justify-self-start'
+        className={tw`self-center justify-self-start`}
         onChange={(_) => void setLanguage(_ as CodeMirrorMarkupLanguage)}
         triggerClassName={tw`px-4 py-1`}
         value={language}
@@ -123,6 +131,7 @@ const BodyPretty = ({ body }: BodyPrettyProps) => {
         height='100%'
         indentWithTab={false}
         readOnly
+        theme={theme}
         value={prettierBody}
       />
     </>
diff --git a/packages/client/src/pages/http/response/index.tsx b/packages/client/src/pages/http/response/index.tsx
index d6df75443..9b3c26a8f 100644
--- a/packages/client/src/pages/http/response/index.tsx
+++ b/packages/client/src/pages/http/response/index.tsx
@@ -41,20 +41,20 @@ export const ResponseInfo = ({ className, httpResponseId }: ResponseInfoProps) =
   return (
     <div
       className={twMerge(
-        tw`flex items-center gap-1 text-xs leading-5 font-medium tracking-tight text-slate-800`,
+        tw`flex items-center gap-1 text-xs leading-5 font-medium tracking-tight text-on-neutral`,
         className,
       )}
     >
       <div className={tw`flex gap-1 p-2`}>
         <span>Status:</span>
-        <span className={tw`text-green-600`}>{status}</span>
+        <span className={tw`text-success`}>{status}</span>
       </div>
 
       <Separator className={tw`h-4`} orientation='vertical' />
 
       <div className={tw`flex gap-1 p-2`}>
         <span>Time:</span>
-        <span className={tw`text-green-600`}>{pipe(duration, Duration.millis, Duration.format)}</span>
+        <span className={tw`text-success`}>{pipe(duration, Duration.millis, Duration.format)}</span>
       </div>
 
       <Separator className={tw`h-4`} orientation='vertical' />
@@ -101,16 +101,16 @@ export const ResponsePanel = ({ children, className, fullWidth = false, httpResp
 
   return (
     <Tabs className={twMerge(tw`flex h-full flex-col pb-4`, className)}>
-      <div className={twMerge(tw`flex items-center gap-3 border-b border-slate-200 text-md`, fullWidth && tw`px-4`)}>
+      <div className={twMerge(tw`flex items-center gap-3 border-b border-neutral text-md`, fullWidth && tw`px-4`)}>
         <TabList className={tw`flex items-center gap-3`}>
           <Tab
             className={({ isSelected }) =>
               twMerge(
                 tw`
                   -mb-px cursor-pointer border-b-2 border-transparent py-2 text-md leading-5 font-medium tracking-tight
-                  text-slate-500 transition-colors
+                  text-on-neutral-low transition-colors
                 `,
-                isSelected && tw`border-b-violet-700 text-slate-800`,
+                isSelected && tw`border-b-accent text-on-neutral`,
               )
             }
             id='body'
@@ -123,15 +123,15 @@ export const ResponsePanel = ({ children, className, fullWidth = false, httpResp
               twMerge(
                 tw`
                   -mb-px cursor-pointer border-b-2 border-transparent py-2 text-md leading-5 font-medium tracking-tight
-                  text-slate-500 transition-colors
+                  text-on-neutral-low transition-colors
                 `,
-                isSelected && tw`border-b-violet-700 text-slate-800`,
+                isSelected && tw`border-b-accent text-on-neutral`,
               )
             }
             id='headers'
           >
             Headers
-            {headerCount > 0 && <span className={tw`text-xs text-green-600`}> ({headerCount})</span>}
+            {headerCount > 0 && <span className={tw`text-xs text-success`}> ({headerCount})</span>}
           </Tab>
 
           <Tab
@@ -139,15 +139,15 @@ export const ResponsePanel = ({ children, className, fullWidth = false, httpResp
               twMerge(
                 tw`
                   -mb-px cursor-pointer border-b-2 border-transparent py-2 text-md leading-5 font-medium tracking-tight
-                  text-slate-500 transition-colors
+                  text-on-neutral-low transition-colors
                 `,
-                isSelected && tw`border-b-violet-700 text-slate-800`,
+                isSelected && tw`border-b-accent text-on-neutral`,
               )
             }
             id='assertions'
           >
             Assertion Results
-            {assertCount > 0 && <span className={tw`text-xs text-green-600`}> ({assertCount})</span>}
+            {assertCount > 0 && <span className={tw`text-xs text-success`}> ({assertCount})</span>}
           </Tab>
         </TabList>
 
diff --git a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx
index 1f4abe62e..509e20567 100644
--- a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx
+++ b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/index.tsx
@@ -22,11 +22,11 @@ export const Route = createFileRoute('/(dashboard)/(workspace)/workspace/$worksp
 function RouteComponent() {
   return (
     <div className={tw`px-4 py-16 text-center`}>
-      <span className={tw`block text-xl leading-6 font-semibold tracking-tight text-slate-800`}>
+      <span className={tw`block text-xl leading-6 font-semibold tracking-tight text-on-neutral`}>
         Discover what you can do in DevTools
       </span>
 
-      <span className={tw`block text-xs leading-5 tracking-tight text-slate-500`}>
+      <span className={tw`block text-xs leading-5 tracking-tight text-on-neutral-low`}>
         Discover the tools to make your workflow easier and faster.
       </span>
 
@@ -49,17 +49,17 @@ interface CtaButtonProps {
 const CtaButton = ({ description, icon, onPress, title }: CtaButtonProps) => (
   <RAC.Button
     className={tw`
-      flex w-52 cursor-pointer flex-col items-center rounded-lg bg-slate-100 py-10 text-center transition-colors
+      flex w-52 cursor-pointer flex-col items-center rounded-lg bg-neutral py-10 text-center transition-colors
 
-      hover:bg-slate-200
+      hover:bg-neutral-high
     `}
     onPress={onPress}
   >
     {icon}
 
-    <span className={tw`mt-3 text-sm leading-5 font-semibold tracking-tight text-slate-800`}>{title}</span>
+    <span className={tw`mt-3 text-sm leading-5 font-semibold tracking-tight text-on-neutral`}>{title}</span>
 
-    <span className={tw`text-xs leading-5 tracking-tight text-slate-500`}>{description}</span>
+    <span className={tw`text-xs leading-5 tracking-tight text-on-neutral-low`}>{description}</span>
   </RAC.Button>
 );
 
@@ -69,7 +69,7 @@ interface CtaIconProps {
 }
 
 const CtaIcon = ({ children, className }: CtaIconProps) => (
-  <div className={twJoin(tw`rounded-full p-2 text-2xl text-white`, className)}>{children}</div>
+  <div className={twJoin(tw`rounded-full p-2 text-2xl text-on-inverse`, className)}>{children}</div>
 );
 
 const ImportButton = () => {
diff --git a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx
index 8919ee662..b430c8af4 100644
--- a/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx
+++ b/packages/client/src/pages/workspace/routes/workspace/$workspaceIdCan/route.tsx
@@ -84,7 +84,7 @@ function RouteComponent() {
     >
       <PanelGroup {...workspaceSidebarLayout} orientation='horizontal'>
         <Panel
-          className={tw`flex flex-col bg-slate-50`}
+          className={tw`flex flex-col bg-neutral-lower`}
           defaultSize='20%'
           maxSize='40%'
           minSize='10%'
@@ -99,20 +99,22 @@ function RouteComponent() {
               to={router.routesById[routes.dashboard.workspace.route.id].fullPath}
               variant='ghost'
             >
-              <OverviewIcon className={tw`size-5 text-slate-500`} />
-              <h2 className={tw`text-md leading-5 font-semibold tracking-tight text-slate-800`}>Overview</h2>
+              <OverviewIcon className={tw`size-5 text-on-neutral-low`} />
+              <h2 className={tw`text-md leading-5 font-semibold tracking-tight text-on-neutral`}>Overview</h2>
             </ButtonAsRouteLink>
 
             <div className={tw`flex items-center gap-2 px-2.5 py-1.5`}>
-              <CollectionIcon className={tw`size-5 text-slate-500`} />
-              <h2 className={tw`flex-1 text-md leading-5 font-semibold tracking-tight text-slate-800`}>Files</h2>
+              <CollectionIcon className={tw`size-5 text-on-neutral-low`} />
+              <h2 className={tw`flex-1 text-md leading-5 font-semibold tracking-tight text-on-neutral`}>Files</h2>
 
               <MenuTrigger>
                 <TooltipTrigger delay={750}>
-                  <Button className={tw`bg-slate-200 p-0.5`} variant='ghost'>
-                    <FiPlus className={tw`size-4 stroke-[1.2px] text-slate-500`} />
+                  <Button className={tw`bg-neutral p-0.5`} variant='ghost'>
+                    <FiPlus className={tw`size-4 stroke-[1.2px] text-on-neutral-low`} />
                   </Button>
-                  <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Add New File</Tooltip>
+                  <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>
+                    Add New File
+                  </Tooltip>
                 </TooltipTrigger>
 
                 <FileCreateMenu navigate />
@@ -122,14 +124,14 @@ function RouteComponent() {
             <FileTree navigate showControls />
           </div>
 
-          <div className={tw`px-2.5 py-1.5 text-md leading-5 tracking-tight text-slate-800`}>
+          <div className={tw`px-2.5 py-1.5 text-md leading-5 tracking-tight text-on-neutral`}>
             DevTools v{pipe(Config.string('VERSION'), Config.withDefault('[DEV]'), Runtime.runSync(runtime))}
           </div>
         </Panel>
 
         <PanelResizeHandle direction='horizontal' />
 
-        <Panel defaultSize='80%'>
+        <Panel className={tw`bg-neutral-lowest`} defaultSize='80%'>
           <PanelGroup {...workspaceOutletLayout} orientation='vertical'>
             <div className={tw`-mt-px pt-2`}>
               <RouteTabList />
diff --git a/packages/client/src/pages/workspace/ui/status-bar.tsx b/packages/client/src/pages/workspace/ui/status-bar.tsx
index 96d5a5d0f..10e220ecb 100644
--- a/packages/client/src/pages/workspace/ui/status-bar.tsx
+++ b/packages/client/src/pages/workspace/ui/status-bar.tsx
@@ -22,8 +22,8 @@ const logTextStyles = tv({
   base: tw`font-mono text-sm`,
   variants: {
     level: {
-      [LogLevel.ERROR]: tw`text-red-600`,
-      [LogLevel.UNSPECIFIED]: tw`text-slate-800`,
+      [LogLevel.ERROR]: tw`text-danger`,
+      [LogLevel.UNSPECIFIED]: tw`text-on-neutral`,
       [LogLevel.WARNING]: tw`text-yellow-600`,
     } satisfies Record<LogLevel, string>,
   },
@@ -34,12 +34,12 @@ export const StatusBar = () => {
 
   const { showLogs } = routes.dashboard.workspace.route.useSearch();
 
-  const separator = <div className={tw`h-3.5 w-px bg-slate-200`} />;
+  const separator = <div className={tw`h-3.5 w-px bg-neutral`} />;
 
   const bar = (
-    <div className={twMerge(tw`flex items-center gap-2 bg-slate-50 px-2 py-1`, showLogs && tw`bg-white`)}>
+    <div className={twMerge(tw`flex items-center gap-2 bg-neutral-lower px-2 py-1`, showLogs && tw`bg-neutral-lowest`)}>
       <ButtonAsRouteLink
-        className={tw`px-2 py-1 text-xs leading-4 tracking-tight text-slate-800`}
+        className={tw`px-2 py-1 text-xs leading-4 tracking-tight text-on-neutral`}
         search={(_) => ({ ..._, showLogs: showLogs ? undefined : true })}
         to='.'
         variant='ghost'
@@ -55,7 +55,7 @@ export const StatusBar = () => {
       {showLogs && (
         <>
           <Button
-            className={tw`px-2 py-1 text-xs leading-4 tracking-tight text-slate-800`}
+            className={tw`px-2 py-1 text-xs leading-4 tracking-tight text-on-neutral`}
             onPress={() => {
               const state = logCollection.utils.state();
               state.begin();
@@ -64,7 +64,7 @@ export const StatusBar = () => {
             }}
             variant='ghost'
           >
-            <FiTrash2 className={tw`size-3 text-slate-500`} />
+            <FiTrash2 className={tw`size-3 text-on-neutral-low`} />
             <span>Clear Logs</span>
           </Button>
 
@@ -76,7 +76,7 @@ export const StatusBar = () => {
             to='.'
             variant='ghost'
           >
-            <FiX className={tw`size-4 text-slate-500`} />
+            <FiX className={tw`size-4 text-on-neutral-low`} />
           </ButtonAsRouteLink>
         </>
       )}
diff --git a/packages/client/src/shared/ui/dashboard.tsx b/packages/client/src/shared/ui/dashboard.tsx
index b8c854932..5f55ce8a7 100644
--- a/packages/client/src/shared/ui/dashboard.tsx
+++ b/packages/client/src/shared/ui/dashboard.tsx
@@ -1,9 +1,11 @@
 import { Outlet, useRouter } from '@tanstack/react-router';
 import { Suspense } from 'react';
-import { ButtonAsRouteLink } from '@the-dev-tools/ui/button';
+import { FiMoon, FiSun } from 'react-icons/fi';
+import { Button, ButtonAsRouteLink } from '@the-dev-tools/ui/button';
 import { Logo } from '@the-dev-tools/ui/illustrations';
 import { Spinner } from '@the-dev-tools/ui/spinner';
 import { tw } from '@the-dev-tools/ui/tailwind-literal';
+import { useTheme } from '@the-dev-tools/ui/theme';
 import { routes } from '../routes';
 
 interface DashboardLayoutProps {
@@ -14,12 +16,14 @@ interface DashboardLayoutProps {
 export const DashboardLayout = ({ children, navbar }: DashboardLayoutProps) => {
   const router = useRouter();
 
+  const { theme, toggleTheme } = useTheme();
+
   return (
     <div className={tw`flex h-full flex-col`}>
       <div
         className={tw`
-          flex h-12 w-full flex-none items-center gap-4 bg-slate-950 px-4 text-sm font-semibold tracking-tight
-          text-white
+          flex h-12 w-full flex-none items-center gap-4 bg-inverse px-4 text-sm font-semibold tracking-tight
+          text-on-inverse
         `}
       >
         <ButtonAsRouteLink
@@ -30,10 +34,17 @@ export const DashboardLayout = ({ children, navbar }: DashboardLayoutProps) => {
           <Logo className={tw`size-7`} />
         </ButtonAsRouteLink>
 
-        <div className={tw`h-5 w-px bg-white/20`} />
+        <div className={tw`h-5 w-px bg-on-inverse-lower`} />
 
         {navbar}
 
+        <Button className={tw`p-1 text-xl`} onPress={() => void toggleTheme()} variant='ghost dark'>
+          {theme === 'light' && <FiSun />}
+          {theme === 'dark' && <FiMoon />}
+        </Button>
+
+        <div className={tw`-ml-1.5 h-5 w-px bg-on-inverse-lower`} />
+
         <a href='https://github.com/the-dev-tools/dev-tools' rel='noreferrer' target='_blank'>
           <img alt='GitHub Repo stars' src='https://img.shields.io/github/stars/the-dev-tools/dev-tools' />
         </a>
diff --git a/packages/client/src/widgets/environment/index.tsx b/packages/client/src/widgets/environment/index.tsx
index 0237ed96d..3be85083c 100644
--- a/packages/client/src/widgets/environment/index.tsx
+++ b/packages/client/src/widgets/environment/index.tsx
@@ -74,7 +74,7 @@ export const EnvironmentsWidget = () => {
   );
 
   return (
-    <div className={tw`flex gap-1 border-b border-slate-200 p-3`}>
+    <div className={tw`flex gap-1 border-b border-neutral p-3`}>
       <Select
         aria-label='Environment'
         items={environments}
@@ -92,11 +92,13 @@ export const EnvironmentsWidget = () => {
             <SelectItem id={environmentIdCan} textValue={item.name}>
               <div className={tw`flex items-center gap-2`}>
                 <div
-                  className={tw`flex size-6 items-center justify-center rounded-md bg-slate-200 text-xs text-slate-500`}
+                  className={tw`
+                    flex size-6 items-center justify-center rounded-md bg-neutral text-xs text-on-neutral-low
+                  `}
                 >
                   {item.isGlobal ? <VariableIcon /> : item.name[0]}
                 </div>
-                <span className={tw`text-md leading-5 font-semibold tracking-tight text-slate-800`}>
+                <span className={tw`text-md leading-5 font-semibold tracking-tight text-on-neutral`}>
                   {item.isGlobal ? 'Global Environment' : item.name}
                 </span>
               </div>
@@ -114,9 +116,9 @@ export const EnvironmentsWidget = () => {
       <DialogTrigger>
         <TooltipTrigger delay={750}>
           <Button className={tw`p-1`} variant='ghost'>
-            <GlobalEnvironmentIcon className={tw`size-4 text-slate-500`} />
+            <GlobalEnvironmentIcon className={tw`size-4 text-on-neutral-low`} />
           </Button>
-          <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>
+          <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>
             Manage Variables & Environments
           </Tooltip>
         </TooltipTrigger>
@@ -168,10 +170,10 @@ const EnvironmentModal = () => {
       <Dialog className={tw`h-full outline-hidden`}>
         {({ close }) => (
           <div className={tw`flex h-full`}>
-            <div className={tw`flex w-64 flex-col border-r border-slate-200 bg-slate-50 p-4 tracking-tight`}>
+            <div className={tw`flex w-64 flex-col border-r border-neutral bg-neutral-lower p-4 tracking-tight`}>
               <div className={tw`mb-4`}>
-                <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-slate-800`}>Variable Settings</div>
-                <div className={tw`text-xs leading-4 text-slate-500`}>Manage variables & environment</div>
+                <div className={tw`mb-0.5 text-sm leading-5 font-semibold text-on-neutral`}>Variable Settings</div>
+                <div className={tw`text-xs leading-4 text-on-neutral-low`}>Manage variables & environment</div>
               </div>
 
               {globalKey && (
@@ -179,7 +181,7 @@ const EnvironmentModal = () => {
                   className={({ isSelected }) =>
                     twJoin(
                       tw`-mx-2 flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm`,
-                      isSelected && tw`bg-slate-200`,
+                      isSelected && tw`bg-neutral`,
                     )
                   }
                   isSelected={selectedKey === globalKey}
@@ -187,17 +189,17 @@ const EnvironmentModal = () => {
                     if (isSelected && globalKey) setSelectedKey(globalKey);
                   }}
                 >
-                  <VariableIcon className={tw`size-4 text-slate-500`} />
+                  <VariableIcon className={tw`size-4 text-on-neutral-low`} />
                   <span className={tw`text-md leading-5 font-semibold`}>Global Variables</span>
                 </ToggleButton>
               )}
 
               <div className={tw`mt-3 mb-1 flex items-center justify-between py-0.5`}>
-                <span className={tw`text-md leading-5 text-slate-400`}>Environments</span>
+                <span className={tw`text-md leading-5 text-neutral-higher`}>Environments</span>
 
                 <TooltipTrigger delay={750}>
                   <Button
-                    className={tw`bg-slate-200 p-0.5`}
+                    className={tw`bg-neutral p-0.5`}
                     onPress={async () => {
                       const environment = Protobuf.create(EnvironmentInsertSchema, {
                         environmentId: Ulid.generate().bytes,
@@ -212,9 +214,9 @@ const EnvironmentModal = () => {
                     }}
                     variant='ghost'
                   >
-                    <FiPlus className={tw`size-4 text-slate-500`} />
+                    <FiPlus className={tw`size-4 text-on-neutral-low`} />
                   </Button>
-                  <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>
+                  <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>
                     Add New Environment
                   </Tooltip>
                 </TooltipTrigger>
@@ -238,7 +240,7 @@ const EnvironmentModal = () => {
                     className={({ isSelected }) =>
                       twJoin(
                         tw`-mx-2 flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm`,
-                        isSelected && tw`bg-slate-200`,
+                        isSelected && tw`bg-neutral`,
                       )
                     }
                     id={environmentCollection.utils.getKey(_)}
@@ -246,7 +248,8 @@ const EnvironmentModal = () => {
                   >
                     <div
                       className={tw`
-                        flex size-4 items-center justify-center rounded-sm bg-slate-300 text-xs leading-3 text-slate-500
+                        flex size-4 items-center justify-center rounded-sm bg-neutral-high text-xs leading-3
+                        text-on-neutral-low
                       `}
                     >
                       {_.name[0]}
@@ -260,7 +263,7 @@ const EnvironmentModal = () => {
             <div className={tw`flex h-full min-w-0 flex-1 flex-col`}>
               {selectedKey && <EnvironmentPanel id={selectedKey.toString()} />}
               <div className={tw`flex-1`} />
-              <div className={tw`flex justify-end gap-2 border-t border-slate-200 px-6 py-3`}>
+              <div className={tw`flex justify-end gap-2 border-t border-neutral px-6 py-3`}>
                 <Button onPress={close} variant='primary'>
                   Close
                 </Button>
@@ -309,11 +312,11 @@ const EnvironmentPanel = ({ id }: EnvironmentPanelProps) => {
     <div className={tw`h-full px-6 py-4`}>
       <div className={tw`mb-4 flex items-center gap-2`} onContextMenu={onContextMenu}>
         {isGlobal ? (
-          <VariableIcon className={tw`size-6 text-slate-500`} />
+          <VariableIcon className={tw`size-6 text-on-neutral-low`} />
         ) : (
           <div
             className={tw`
-              flex size-6 items-center justify-center rounded-md bg-slate-300 text-xs leading-3 text-slate-500
+              flex size-6 items-center justify-center rounded-md bg-neutral-high text-xs leading-3 text-on-neutral-low
             `}
           >
             {name[0]}
@@ -323,12 +326,12 @@ const EnvironmentPanel = ({ id }: EnvironmentPanelProps) => {
         {isEditing ? (
           <TextInputField
             aria-label='Environment name'
-            inputClassName={tw`-my-1 py-1 leading-none font-semibold tracking-tight text-slate-800`}
+            inputClassName={tw`-my-1 py-1 leading-none font-semibold tracking-tight text-on-neutral`}
             {...textFieldProps}
           />
         ) : (
           <AriaButton
-            className={tw`max-w-full cursor-text truncate leading-5 font-semibold tracking-tight text-slate-800`}
+            className={tw`max-w-full cursor-text truncate leading-5 font-semibold tracking-tight text-on-neutral`}
             isDisabled={isGlobal}
             onContextMenu={onContextMenu}
             onPress={() => void edit()}
@@ -342,7 +345,7 @@ const EnvironmentPanel = ({ id }: EnvironmentPanelProps) => {
         {!isGlobal && (
           <MenuTrigger {...menuTriggerProps}>
             <Button className={tw`p-1`} variant='ghost'>
-              <FiMoreHorizontal className={tw`size-4 text-slate-500`} />
+              <FiMoreHorizontal className={tw`size-4 text-on-neutral-low`} />
             </Button>
 
             <Menu {...menuProps}>
@@ -488,7 +491,7 @@ export const VariablesTable = ({ environmentId }: VariablesTableProps) => {
           }}
           variant='ghost'
         >
-          <FiPlus className={tw`size-4 text-slate-500`} />
+          <FiPlus className={tw`size-4 text-on-neutral-low`} />
           New variable
         </Button>
       </TableFooter>
diff --git a/packages/client/src/widgets/export/index.tsx b/packages/client/src/widgets/export/index.tsx
index a1b49b650..2f78ac185 100644
--- a/packages/client/src/widgets/export/index.tsx
+++ b/packages/client/src/widgets/export/index.tsx
@@ -33,23 +33,23 @@ export const ExportDialog = () => {
     <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
       <TooltipTrigger delay={750}>
         <Button className={tw`p-1`} variant='ghost'>
-          <TbFileExport className={tw`size-4 text-slate-500`} />
+          <TbFileExport className={tw`size-4 text-on-neutral-low`} />
         </Button>
-        <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>Export Files</Tooltip>
+        <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>Export Files</Tooltip>
       </TooltipTrigger>
 
       <Modal style={{ maxHeight: 'max(40vh, min(32rem, 90vh))', maxWidth: 'max(40vw, min(40rem, 90vw))' }}>
         <Dialog className={tw`flex h-full flex-col overflow-auto outline-hidden`}>
           <div className={tw`flex h-full min-h-0 flex-1 flex-col overflow-auto p-6`}>
             <div className={tw`flex items-center justify-between`}>
-              <div className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`}>Export Files</div>
+              <div className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`}>Export Files</div>
 
               <Button className={tw`p-1`} onPress={() => void onOpenChange(false)} variant='ghost'>
-                <FiX className={tw`size-5 text-slate-500`} />
+                <FiX className={tw`size-5 text-on-neutral-low`} />
               </Button>
             </div>
 
-            <div className={tw`text-xs leading-5 tracking-tight text-slate-500`}>
+            <div className={tw`text-xs leading-5 tracking-tight text-on-neutral-low`}>
               Please select the files that you would like to export.
             </div>
 
@@ -65,7 +65,7 @@ export const ExportDialog = () => {
             </div>
           </div>
 
-          <div className={tw`flex justify-end gap-2 border-t border-slate-200 px-6 py-3`}>
+          <div className={tw`flex justify-end gap-2 border-t border-neutral px-6 py-3`}>
             <Button onPress={() => void onOpenChange(false)}>Cancel</Button>
 
             <Button
diff --git a/packages/client/src/widgets/import/index.tsx b/packages/client/src/widgets/import/index.tsx
index a44209ce5..3bb67cdf3 100644
--- a/packages/client/src/widgets/import/index.tsx
+++ b/packages/client/src/widgets/import/index.tsx
@@ -50,9 +50,9 @@ export const ImportDialogTrigger = () => {
     <>
       <TooltipTrigger delay={750}>
         <Button className={tw`p-1`} onPress={() => void dialog.open()} variant='ghost'>
-          <FileImportIcon className={tw`size-4 text-slate-500`} />
+          <FileImportIcon className={tw`size-4 text-on-neutral-low`} />
         </Button>
-        <Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>
+        <Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>
           Import Collections and Flows
         </Tooltip>
       </TooltipTrigger>
@@ -73,19 +73,19 @@ const InnerDialog = ({ action, children }: InnerDialogProps) => (
       <>
         <div className={tw`flex h-full min-h-0 flex-1 flex-col overflow-auto p-6`}>
           <div className={tw`flex items-center justify-between`}>
-            <Heading className={tw`text-xl leading-6 font-semibold tracking-tighter text-slate-800`} slot='title'>
+            <Heading className={tw`text-xl leading-6 font-semibold tracking-tighter text-on-neutral`} slot='title'>
               Import Collections and Flows
             </Heading>
 
             <Button className={tw`p-1`} onPress={() => void close()} variant='ghost'>
-              <FiX className={tw`size-5 text-slate-500`} />
+              <FiX className={tw`size-5 text-on-neutral-low`} />
             </Button>
           </div>
 
           {children}
         </div>
 
-        <div className={tw`flex justify-end gap-2 border-t border-slate-200 px-6 py-3`}>
+        <div className={tw`flex justify-end gap-2 border-t border-neutral px-6 py-3`}>
           <Button onPress={() => void close()}>Cancel</Button>
 
           {action}
@@ -145,8 +145,8 @@ const InitialDialog = ({ setModal, successAction }: InitialDialogProps) => {
     >
       <div
         className={tw`
-          mt-6 rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm leading-4 font-medium tracking-tight
-          text-slate-500
+          mt-6 rounded-lg border border-neutral bg-neutral-lower p-4 text-sm leading-4 font-medium tracking-tight
+          text-on-neutral-low
         `}
       >
         <FiInfo className={tw`mr-1.5 inline-block size-4 align-bottom`} />
@@ -215,7 +215,7 @@ const DomainDialog = ({ domains, input, successAction }: DomainDialogProps) => {
         </Button>
       }
     >
-      <div className={tw`text-xs leading-5 tracking-tight text-slate-500`}>
+      <div className={tw`text-xs leading-5 tracking-tight text-on-neutral-low`}>
         Please deselect the domain names to be excluded in the flow. There might be requests that you may not want to
         import.
       </div>
diff --git a/packages/client/src/widgets/tabs/index.tsx b/packages/client/src/widgets/tabs/index.tsx
index 95cd37259..05a720d14 100644
--- a/packages/client/src/widgets/tabs/index.tsx
+++ b/packages/client/src/widgets/tabs/index.tsx
@@ -121,15 +121,15 @@ const TabItem = ({ id }: TabItemProps) => {
       aria-label='Tab'
       className={tw`
         relative -ml-px flex h-11 max-w-60 cursor-pointer items-center justify-between gap-3 border p-2.5 text-xs
-        leading-4 font-medium tracking-tight text-slate-800
+        leading-4 font-medium tracking-tight text-on-neutral
 
-        not-route-active:border-b not-route-active:border-transparent not-route-active:border-b-gray-200
+        not-route-active:border-b not-route-active:border-transparent not-route-active:border-b-neutral
         not-route-active:opacity-60
 
-        before:absolute before:-left-px before:h-6 before:w-px before:bg-gray-200
+        before:absolute before:-left-px before:h-6 before:w-px before:bg-neutral
 
-        route-active:rounded-t-md route-active:border route-active:border-gray-200 route-active:border-b-transparent
-        route-active:bg-white
+        route-active:rounded-t-md route-active:border route-active:border-neutral route-active:border-b-transparent
+        route-active:bg-neutral-lowest
       `}
       id={id}
       onAuxClick={(event) => {
@@ -147,7 +147,7 @@ const TabItem = ({ id }: TabItemProps) => {
         }}
         variant='ghost'
       >
-        <FiX className={tw`size-4 text-slate-500`} />
+        <FiX className={tw`size-4 text-on-neutral-low`} />
       </Button>
     </Primitive.ListBoxItemRouteLink>
   );
@@ -244,7 +244,7 @@ export const RouteTabList = () => {
       className={tw`
         relative flex h-11 w-full overflow-x-auto overflow-y-hidden
 
-        before:absolute before:bottom-0 before:w-full before:border-b before:border-gray-200
+        before:absolute before:bottom-0 before:w-full before:border-b before:border-neutral
       `}
       dragAndDropHooks={dragAndDropHooks}
       items={tabs}
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
index eb72db9bc..53629d700 100644
--- a/packages/ui/.storybook/preview.tsx
+++ b/packages/ui/.storybook/preview.tsx
@@ -1,9 +1,23 @@
 import { Preview } from '@storybook/react-vite';
 import { createRootRoute, createRouter, RouterProvider } from '@tanstack/react-router';
+import { Option, pipe, Record, String } from 'effect';
 import { StrictMode } from 'react';
 import { UiProvider } from '../src/provider';
 
-import '../src/styles.css';
+import '../src/styles/index.css';
+
+const theme = pipe(
+  new URLSearchParams(window.location.search).get('globals') ?? '',
+  String.split(';'),
+  Record.fromIterableWith((_) => {
+    const [key, value] = String.split(_, ':');
+    return [key, value];
+  }),
+  Record.get('backgrounds.value'),
+  Option.getOrUndefined,
+);
+
+if (theme === 'dark') document.documentElement.classList.add('dark');
 
 const preview: Preview = {
   decorators: [
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 805245a06..0606ca0e1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -6,7 +6,7 @@
     ".": "./src/index.tsx",
     "./*": "./src/*.tsx",
     "./storybook-config/*": "./.storybook/*",
-    "./styles": "./src/styles.css"
+    "./styles": "./src/styles/index.css"
   },
   "dependencies": {
     "@bufbuild/protobuf": "catalog:",
diff --git a/packages/ui/src/add-button.tsx b/packages/ui/src/add-button.tsx
index f4a671508..06a4fb01e 100644
--- a/packages/ui/src/add-button.tsx
+++ b/packages/ui/src/add-button.tsx
@@ -10,14 +10,8 @@ export const addButtonStyles = tv({
   base: tw`flex size-5 items-center justify-center rounded-full border font-semibold select-none`,
   variants: {
     variant: {
-      dark: tw`
-        border-slate-300 text-slate-500
-
-        hover:border-slate-500 hover:text-slate-600
-
-        pressed:border-slate-800 pressed:text-slate-900
-      `,
-      light: tw`border-white/20 text-white hover:border-white/40 pressed:border-white`,
+      dark: tw`border-neutral-higher text-on-neutral-low hover:text-on-neutral`,
+      light: tw`border-on-inverse/20 text-on-inverse hover:border-on-inverse/40 pressed:border-on-inverse`,
     },
   },
   defaultVariants: {
@@ -41,7 +35,7 @@ export const AddButton = ({ tooltipText, ...props }: AddButtonProps) => {
   button = (
     <RAC.TooltipTrigger delay={750}>
       {button}
-      <RAC.Tooltip className={tw`rounded-md bg-slate-800 px-2 py-1 text-xs text-white`}>{tooltipText}</RAC.Tooltip>
+      <RAC.Tooltip className={tw`rounded-md bg-inverse px-2 py-1 text-xs text-on-inverse`}>{tooltipText}</RAC.Tooltip>
     </RAC.TooltipTrigger>
   );
 
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index ce540cd09..128eff7a6 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -19,34 +19,34 @@ export const buttonStyles = tv({
   variants: {
     variant: {
       primary: tw`
-        border-violet-700 bg-violet-600 text-white
+        border-accent-high bg-accent text-on-accent
 
-        hover:border-violet-800 hover:bg-violet-700
+        hover:border-accent-higher hover:bg-accent-high
 
-        disabled:border-violet-400 disabled:bg-violet-400
+        disabled:border-accent-low disabled:bg-accent-low
 
-        pressed:border-violet-900 pressed:bg-violet-800
+        pressed:border-accent-highest pressed:bg-accent-higher
       `,
 
       secondary: tw`
-        border-slate-200 bg-white text-slate-800
+        border-neutral bg-neutral-lowest text-on-neutral
 
-        hover:border-slate-200 hover:bg-slate-100
+        hover:bg-neutral-low
 
-        pressed:border-slate-300 pressed:bg-white
+        pressed:border-neutral-high pressed:bg-neutral
       `,
 
       danger: tw`
-        border-red-700 bg-red-600 text-white
+        border-danger bg-danger-low text-on-danger
 
-        hover:border-red-800 hover:bg-red-700
+        hover:border-danger-high hover:bg-danger
 
-        pressed:border-red-900 pressed:bg-red-800
+        pressed:border-danger-higher pressed:bg-danger-high
       `,
 
-      ghost: tw`text-slate-800 hover:bg-slate-100 pressed:bg-slate-200`,
+      ghost: tw`text-on-neutral hover:bg-neutral-low pressed:bg-neutral`,
 
-      'ghost dark': tw`text-white hover:bg-slate-600 pressed:bg-slate-700`,
+      'ghost dark': tw`text-on-inverse hover:bg-inverse-lower pressed:bg-inverse-low`,
     },
   },
   defaultVariants: {
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
index 1bb44cd98..bdb8db9ba 100644
--- a/packages/ui/src/checkbox.tsx
+++ b/packages/ui/src/checkbox.tsx
@@ -12,10 +12,10 @@ const checkboxStyles = tv({
     box: [
       focusVisibleRingStyles(),
       tw`
-        flex size-4 flex-none cursor-pointer items-center justify-center rounded-sm border border-slate-200 bg-white
-        p-0.5 text-white
+        flex size-4 flex-none cursor-pointer items-center justify-center rounded-sm border border-neutral
+        bg-neutral-lowest p-0.5 text-on-accent
 
-        group-selected/checkbox:border-violet-600 group-selected/checkbox:bg-violet-600
+        group-selected/checkbox:border-accent group-selected/checkbox:bg-accent
       `,
     ],
   },
diff --git a/packages/ui/src/field.tsx b/packages/ui/src/field.tsx
index 4c31e7274..11d878530 100644
--- a/packages/ui/src/field.tsx
+++ b/packages/ui/src/field.tsx
@@ -10,7 +10,7 @@ export interface FieldLabelProps extends RAC.LabelProps {}
 export const FieldLabel = ({ className, ...props }: FieldLabelProps) => (
   <RAC.Label
     {...props}
-    className={twMerge(className, tw`flex items-center text-sm leading-5 font-medium tracking-tight text-slate-800`)}
+    className={twMerge(className, tw`flex items-center text-sm leading-5 font-medium tracking-tight text-on-neutral`)}
   />
 );
 
@@ -19,5 +19,5 @@ export const FieldLabel = ({ className, ...props }: FieldLabelProps) => (
 export interface FieldErrorProps extends RAC.FieldErrorProps {}
 
 export const FieldError = ({ className, ...props }: FieldErrorProps) => (
-  <RAC.FieldError {...props} className={composeTailwindRenderProps(className, tw`text-red-700`)} />
+  <RAC.FieldError {...props} className={composeTailwindRenderProps(className, tw`text-danger`)} />
 );
diff --git a/packages/ui/src/file-drop-zone.tsx b/packages/ui/src/file-drop-zone.tsx
index f7be2c97c..accd07a77 100644
--- a/packages/ui/src/file-drop-zone.tsx
+++ b/packages/ui/src/file-drop-zone.tsx
@@ -48,10 +48,10 @@ export const FileDropZone = ({
         className,
         focusVisibleRingStyles(),
         tw`
-          flex min-h-40 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-slate-300
-          bg-white p-4
+          flex min-h-40 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-neutral-high
+          bg-neutral-lowest p-4
 
-          drop-target:bg-violet-100 drop-target:outline-4 drop-target:outline-violet-200
+          drop-target:bg-accent-lowest drop-target:outline-4 drop-target:outline-accent-lower
         `,
       )}
       isDisabled={isDisabled || (hasFiles && !allowsMultiple)}
@@ -74,9 +74,9 @@ export const FileDropZone = ({
         </div>
       ) : (
         <>
-          <CloudUploadIcon className={tw`size-7 text-slate-500`} />
+          <CloudUploadIcon className={tw`size-7 text-on-neutral-low`} />
 
-          <RAC.Text className={tw`mb-1 text-sm leading-5 font-semibold tracking-tight text-slate-800`} slot='label'>
+          <RAC.Text className={tw`mb-1 text-sm leading-5 font-semibold tracking-tight text-on-neutral`} slot='label'>
             Drag and drop your files or
           </RAC.Text>
 
@@ -96,19 +96,19 @@ interface FilePreviewProps {
 
 const FilePreview = ({ file, onRemove }: FilePreviewProps) => (
   <div className={tw`flex w-40 flex-col items-center`}>
-    <div className={tw`mb-3 rounded-md border border-slate-200 bg-white p-1.5`}>
-      <FiFile className={tw`size-5 text-slate-500`} />
+    <div className={tw`mb-3 rounded-md border border-neutral bg-neutral-lowest p-1.5`}>
+      <FiFile className={tw`size-5 text-on-neutral-low`} />
     </div>
 
-    <div className={tw`w-full truncate text-center text-md leading-5 font-medium tracking-tight text-slate-800`}>
+    <div className={tw`w-full truncate text-center text-md leading-5 font-medium tracking-tight text-on-neutral`}>
       {file.name}
     </div>
 
-    <div className={tw`text-xs leading-4 tracking-tight text-slate-500`}>{formatSize(file.size)}</div>
+    <div className={tw`text-xs leading-4 tracking-tight text-on-neutral-low`}>{formatSize(file.size)}</div>
 
     {onRemove && (
       <Button className={tw`mt-1 p-1`} onPress={() => void onRemove()} variant='ghost'>
-        <DeleteIcon className={tw`size-4 text-rose-700`} />
+        <DeleteIcon className={tw`size-4 text-danger`} />
       </Button>
     )}
   </div>
diff --git a/packages/ui/src/focus-ring.tsx b/packages/ui/src/focus-ring.tsx
index 90231a0fd..595dd03d9 100644
--- a/packages/ui/src/focus-ring.tsx
+++ b/packages/ui/src/focus-ring.tsx
@@ -3,19 +3,19 @@ import { tw } from './tailwind-literal';
 
 const baseStyles = tv({ base: tw`relative outline-0 outline-transparent transition-colors` });
 
-export const focusRingStyles = tv({ extend: baseStyles, base: tw`focus:outline-4 focus:outline-violet-200` });
+export const focusRingStyles = tv({ extend: baseStyles, base: tw`focus:outline-4 focus:outline-accent-lower` });
 
 export const focusVisibleRingStyles = tv({
   extend: baseStyles,
-  base: tw`focus-visible:outline-4 focus-visible:outline-violet-200`,
+  base: tw`focus-visible:outline-4 focus-visible:outline-accent-lower`,
 });
 
 export const focusWithinRingStyles = tv({
   extend: baseStyles,
-  base: tw`focus-within:outline-4 focus-within:outline-violet-200`,
+  base: tw`focus-within:outline-4 focus-within:outline-accent-lower`,
 });
 
 export const focusVisibleWithinRingStyles = tv({
   extend: focusVisibleRingStyles,
-  base: tw`has-focus-visible:outline-4 has-focus-visible:outline-violet-200`,
+  base: tw`has-focus-visible:outline-4 has-focus-visible:outline-accent-lower`,
 });
diff --git a/packages/ui/src/json-tree.tsx b/packages/ui/src/json-tree.tsx
index 91f7308ff..556716c29 100644
--- a/packages/ui/src/json-tree.tsx
+++ b/packages/ui/src/json-tree.tsx
@@ -79,20 +79,22 @@ export const JsonTreeItem = ({ id = 'root', jsonIndex, jsonKey, jsonValue }: Jso
       textValue={valueText ?? jsonKey ?? indexText ?? ''}
       {...(itemProps as TreeItemProps<object>)}
     >
-      {jsonKey && <span className={tw`font-mono text-xs leading-5 text-red-700`}>{jsonKey}</span>}
+      {jsonKey && <span className={tw`font-mono text-xs leading-5 text-danger`}>{jsonKey}</span>}
 
       {indexText && (
-        <span className={tw`rounded-sm bg-slate-200 px-2 py-0.5 text-xs font-medium tracking-tight text-slate-500`}>
+        <span className={tw`rounded-sm bg-neutral px-2 py-0.5 text-xs font-medium tracking-tight text-on-neutral-low`}>
           {indexText}
         </span>
       )}
 
-      {quantity && <span className={tw`text-xs leading-5 font-medium tracking-tight text-slate-500`}>{quantity}</span>}
+      {quantity && (
+        <span className={tw`text-xs leading-5 font-medium tracking-tight text-on-neutral-low`}>{quantity}</span>
+      )}
 
       {valueText && (
         <>
-          <span className={tw`font-mono text-xs leading-5 text-slate-800`}>:</span>
-          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-blue-700`}>{valueText}</span>
+          <span className={tw`font-mono text-xs leading-5 text-on-neutral`}>:</span>
+          <span className={tw`flex-1 font-mono text-xs leading-5 break-all text-info`}>{valueText}</span>
         </>
       )}
     </TreeItem>
diff --git a/packages/ui/src/list-box.tsx b/packages/ui/src/list-box.tsx
index 866628001..04a62d858 100644
--- a/packages/ui/src/list-box.tsx
+++ b/packages/ui/src/list-box.tsx
@@ -12,7 +12,7 @@ import { createLinkGeneric } from './utils/link';
 
 export const listBoxStyles = tv({
   base: tw`
-    pointer-events-auto overflow-auto rounded-lg border border-slate-200 bg-white py-0.5 shadow-md outline-hidden
+    pointer-events-auto overflow-auto rounded-lg border border-neutral bg-neutral-lowest py-0.5 shadow-md outline-hidden
   `,
 });
 
@@ -33,9 +33,25 @@ export const listBoxItemStyles = tv({
   `,
   variants: {
     variant: {
-      accent: tw`text-violet-600 hover:bg-violet-100 pressed:bg-violet-200 selected:bg-violet-200`,
-      danger: tw`text-rose-700 hover:bg-rose-100 pressed:bg-rose-200 selected:bg-rose-200`,
-      default: tw`text-slate-800 hover:bg-slate-100 pressed:bg-slate-200 selected:bg-slate-200`,
+      accent: tw`
+        text-accent
+
+        hover:bg-accent-lowest hover:text-on-accent
+
+        pressed:bg-accent-low pressed:text-on-accent
+
+        selected:bg-accent-low selected:text-on-accent
+      `,
+      danger: tw`
+        text-danger
+
+        hover:bg-danger-lowest hover:text-on-danger
+
+        pressed:bg-danger-low pressed:text-on-danger
+
+        selected:bg-danger-low selected:text-on-danger
+      `,
+      default: tw`text-on-neutral hover:bg-neutral-low pressed:bg-neutral selected:bg-neutral`,
     },
   },
   defaultVariants: {
@@ -63,7 +79,7 @@ export const ListBoxHeader = ({ className, ...props }: ListBoxHeaderProps) => (
   <RAC.Header
     {...props}
     className={twMerge(
-      tw`px-3 pt-2 pb-0.5 text-xs leading-5 font-semibold tracking-tight text-slate-500 select-none`,
+      tw`px-3 pt-2 pb-0.5 text-xs leading-5 font-semibold tracking-tight text-on-neutral-low select-none`,
       className,
     )}
   />
diff --git a/packages/ui/src/menu.stories.tsx b/packages/ui/src/menu.stories.tsx
index dc3c6a5e2..a4bb45abe 100644
--- a/packages/ui/src/menu.stories.tsx
+++ b/packages/ui/src/menu.stories.tsx
@@ -30,7 +30,7 @@ export const Basic: Story = {
     return (
       <MenuTrigger>
         <Button className={tw`p-1`}>
-          <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-slate-500`} />
+          <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-on-neutral-low`} />
         </Button>
 
         <Menu {...props}>
@@ -68,7 +68,7 @@ export const WithAvatars: Story = {
     return (
       <MenuTrigger>
         <Button className={tw`p-1`}>
-          <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-slate-500`} />
+          <FiMoreHorizontal className={tw`size-4 stroke-[1.2px] text-on-neutral-low`} />
         </Button>
 
         <Menu {...props}>
diff --git a/packages/ui/src/menu.tsx b/packages/ui/src/menu.tsx
index 7ae16a65f..166589395 100644
--- a/packages/ui/src/menu.tsx
+++ b/packages/ui/src/menu.tsx
@@ -81,7 +81,7 @@ export const MenuItem = <T extends object>({ children, ...props }: MenuItemProps
       <>
         {children}
         <div className={tw`flex-1`} />
-        {hasSubmenu && <FiChevronRight className={tw`size-3 text-slate-500`} />}
+        {hasSubmenu && <FiChevronRight className={tw`size-3 text-on-neutral-low`} />}
       </>
     ))}
   </RAC.MenuItem>
diff --git a/packages/ui/src/modal.stories.tsx b/packages/ui/src/modal.stories.tsx
index 5a6e9150d..68fc72317 100644
--- a/packages/ui/src/modal.stories.tsx
+++ b/packages/ui/src/modal.stories.tsx
@@ -25,8 +25,8 @@ export const Default: Story = {
 
         <Modal {...props}>
           <Dialog className={tw`flex h-full flex-col p-4 outline-hidden`}>
-            <h1 className={tw`mb-1 leading-5 font-semibold tracking-tight text-slate-800`}>Delete workspace?</h1>
-            <span className={tw`text-sm leading-5 font-medium tracking-tight text-slate-500`}>
+            <h1 className={tw`mb-1 leading-5 font-semibold tracking-tight text-on-neutral`}>Delete workspace?</h1>
+            <span className={tw`text-sm leading-5 font-medium tracking-tight text-on-neutral-low`}>
               This action will remove the workspace permanently
             </span>
 
@@ -36,7 +36,7 @@ export const Default: Story = {
               <Button slot='close' variant='secondary'>
                 Cancel
               </Button>
-              <Button className={tw`border-red-700 bg-red-600`} slot='close' variant='primary'>
+              <Button className={tw`border-danger bg-danger-low`} slot='close' variant='primary'>
                 Delete
               </Button>
             </div>
diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx
index 3ad275018..ad5ecc608 100644
--- a/packages/ui/src/modal.tsx
+++ b/packages/ui/src/modal.tsx
@@ -6,7 +6,7 @@ import { composeStyleRenderProps } from './utils';
 
 export const modalStyles = tv({
   slots: {
-    base: tw`size-full overflow-auto rounded-lg bg-white`,
+    base: tw`size-full overflow-auto rounded-lg bg-neutral-lowest`,
 
     overlay: tw`
       fixed inset-0 z-20 flex h-(--visual-viewport-height) items-center justify-center bg-slate-800/50
diff --git a/packages/ui/src/number-field.tsx b/packages/ui/src/number-field.tsx
index f6d5d6fd3..1f754acd1 100644
--- a/packages/ui/src/number-field.tsx
+++ b/packages/ui/src/number-field.tsx
@@ -21,16 +21,16 @@ export const NumberField = ({ className = '', groupClassName, label, ...props }:
       className={composeTailwindRenderProps(
         groupClassName,
         focusVisibleRingStyles(),
-        tw`flex min-w-0 rounded-md border border-slate-200 text-md leading-5 text-slate-800`,
+        tw`flex min-w-0 rounded-md border border-neutral text-md leading-5 text-on-neutral`,
       )}
     >
-      <RAC.Button className={tw`flex size-8 items-center justify-center border-r border-slate-200`} slot='decrement'>
+      <RAC.Button className={tw`flex size-8 items-center justify-center border-r border-neutral`} slot='decrement'>
         <FiMinus />
       </RAC.Button>
 
       <RAC.Input className={tw`min-w-0 flex-1 px-3 outline-hidden`} />
 
-      <RAC.Button className={tw`flex size-8 items-center justify-center border-l border-slate-200`} slot='increment'>
+      <RAC.Button className={tw`flex size-8 items-center justify-center border-l border-neutral`} slot='increment'>
         <FiPlus />
       </RAC.Button>
     </RAC.Group>
diff --git a/packages/ui/src/progress-bar.tsx b/packages/ui/src/progress-bar.tsx
index dad21a67b..872204f53 100644
--- a/packages/ui/src/progress-bar.tsx
+++ b/packages/ui/src/progress-bar.tsx
@@ -16,16 +16,16 @@ export const ProgressBar = ({ className, label, ...props }: ProgressBarProps) =>
       <>
         <div className={tw`flex justify-between gap-2`}>
           <FieldLabel>{label}</FieldLabel>
-          <span className={tw`text-sm text-neutral-600`}>{valueText}</span>
+          <span className={tw`text-sm text-on-neutral`}>{valueText}</span>
         </div>
 
         <div
           className={tw`
-            relative h-2 max-w-full overflow-hidden rounded-full bg-neutral-300 outline-1 -outline-offset-1
+            relative h-2 max-w-full overflow-hidden rounded-full bg-neutral-high outline-1 -outline-offset-1
             outline-transparent
           `}
         >
-          <div className={tw`absolute top-0 h-full rounded-full bg-violet-600`} style={{ width: `${percentage}%` }} />
+          <div className={tw`absolute top-0 h-full rounded-full bg-accent`} style={{ width: `${percentage}%` }} />
         </div>
       </>
     )}
diff --git a/packages/ui/src/provider.tsx b/packages/ui/src/provider.tsx
index 9906b9421..d83bde87a 100644
--- a/packages/ui/src/provider.tsx
+++ b/packages/ui/src/provider.tsx
@@ -1,6 +1,7 @@
 import { Option } from 'effect';
 import { ReactNode } from 'react';
 import * as RAC from 'react-aria-components';
+import { ThemeProvider } from './theme';
 import { ToastQueue, ToastQueueContext } from './toast';
 
 export interface UiProviderProps {
@@ -11,5 +12,6 @@ export interface UiProviderProps {
 export const UiProvider = ({ children, toastQueue }: UiProviderProps) => {
   let _ = <RAC.RouterProvider navigate={() => undefined}>{children}</RAC.RouterProvider>;
   _ = <ToastQueueContext.Provider value={Option.fromNullable(toastQueue)}>{_}</ToastQueueContext.Provider>;
+  _ = <ThemeProvider>{_}</ThemeProvider>;
   return _;
 };
diff --git a/packages/ui/src/radio-group.tsx b/packages/ui/src/radio-group.tsx
index 711099f44..e92f90de7 100644
--- a/packages/ui/src/radio-group.tsx
+++ b/packages/ui/src/radio-group.tsx
@@ -49,25 +49,25 @@ export const RadioGroup = ({ children, className, error, label, ...props }: Radi
 export const radioStyles = tv({
   slots: {
     base: tw`
-      group/radio flex cursor-pointer items-center gap-1.5 text-md leading-5 font-medium tracking-tight text-slate-800
+      group/radio flex cursor-pointer items-center gap-1.5 text-md leading-5 font-medium tracking-tight text-on-neutral
 
-      disabled:text-gray-300
+      disabled:text-on-neutral-lower
     `,
 
     indicator: [
       focusVisibleRingStyles(),
       tw`
-        size-4 rounded-full border border-slate-200 bg-white
+        size-4 rounded-full border border-neutral bg-white
 
-        group-invalid/radio:border-red-700 group-invalid/radio:bg-red-700
+        group-invalid/radio:border-danger group-invalid/radio:bg-danger
 
-        group-disabled/radio:border-slate-200 group-disabled/radio:bg-slate-200
+        group-disabled/radio:border-neutral group-disabled/radio:bg-neutral
 
-        group-pressed/radio:not-selected:border-slate-400
+        group-pressed/radio:not-selected:border-neutral-higher
 
-        group-selected/radio:border-violet-600 group-selected/radio:bg-violet-600
+        group-selected/radio:border-accent group-selected/radio:bg-accent
 
-        group-invalid/radio:pressed:border-red-800
+        group-invalid/radio:pressed:border-danger-high
       `,
     ],
 
diff --git a/packages/ui/src/reorder.tsx b/packages/ui/src/reorder.tsx
index ec01c07b4..8230d97d7 100644
--- a/packages/ui/src/reorder.tsx
+++ b/packages/ui/src/reorder.tsx
@@ -6,9 +6,9 @@ interface DropIndicator {
 }
 
 export const DropIndicatorHorizontal = ({ as: Component = 'div' }: DropIndicator) => (
-  <Component className={tw`relative z-10 col-span-full h-0 w-full ring ring-violet-700`} />
+  <Component className={tw`relative z-10 col-span-full h-0 w-full ring ring-accent-high`} />
 );
 
 export const DropIndicatorVertical = ({ as: Component = 'div' }: DropIndicator) => (
-  <Component className={tw`relative z-10 row-span-full h-full w-0 ring ring-violet-700`} />
+  <Component className={tw`relative z-10 row-span-full h-full w-0 ring ring-accent-high`} />
 );
diff --git a/packages/ui/src/resizable-panel.tsx b/packages/ui/src/resizable-panel.tsx
index 656a1128c..1e636ed3d 100644
--- a/packages/ui/src/resizable-panel.tsx
+++ b/packages/ui/src/resizable-panel.tsx
@@ -5,7 +5,7 @@ import { tw } from './tailwind-literal';
 
 export const panelResizeHandleStyles = tv({
   extend: focusVisibleRingStyles,
-  base: tw`bg-slate-200`,
+  base: tw`bg-neutral`,
   variants: {
     direction: {
       horizontal: tw`h-full w-px cursor-col-resize`,
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index 41635d469..496744859 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -37,7 +37,7 @@ export const Select = <T extends object>({
     {label && <FieldLabel>{label}</FieldLabel>}
     <Button className={triggerClassName!} variant={triggerVariant}>
       <RAC.SelectValue>{renderValue}</RAC.SelectValue>
-      <FiChevronDown className={tw`-mr-1 size-4 text-slate-500 transition-transform group-open:rotate-180`} />
+      <FiChevronDown className={tw`-mr-1 size-4 text-on-neutral-low transition-transform group-open:rotate-180`} />
     </Button>
     {error && <FieldError>{error}</FieldError>}
     <Popover>
@@ -56,7 +56,7 @@ export const SelectItem = <T extends object>(props: ListBoxItemProps<T>) => (
       <>
         {children}
         <div className={tw`flex-1`} />
-        <FiCheckCircle className={tw`hidden size-3.5 stroke-[1.2px] text-green-600 group-selected/list-item:block`} />
+        <FiCheckCircle className={tw`hidden size-3.5 stroke-[1.2px] text-success group-selected/list-item:block`} />
       </>
     ))}
   </ListBoxItem>
diff --git a/packages/ui/src/separator.tsx b/packages/ui/src/separator.tsx
index 1223289ff..36f2f821b 100644
--- a/packages/ui/src/separator.tsx
+++ b/packages/ui/src/separator.tsx
@@ -3,7 +3,7 @@ import { tv, VariantProps } from 'tailwind-variants';
 import { tw } from './tailwind-literal';
 
 export const separatorStyles = tv({
-  base: tw`bg-slate-200`,
+  base: tw`bg-neutral`,
   variants: {
     orientation: {
       horizontal: tw`h-px w-full`,
diff --git a/packages/ui/src/styles/colors/dark.css b/packages/ui/src/styles/colors/dark.css
new file mode 100644
index 000000000..869a9dede
--- /dev/null
+++ b/packages/ui/src/styles/colors/dark.css
@@ -0,0 +1,53 @@
+@custom-variant dark (&:is(.dark *));
+
+.dark {
+  /* Neutral */
+
+  --neutral-lowest: var(--color-zinc-900);
+  --neutral-lower: var(--color-zinc-800);
+  --neutral-low: var(--color-zinc-700);
+  --neutral: var(--color-zinc-700);
+  --neutral-high: var(--color-zinc-500);
+  --neutral-higher: var(--color-zinc-400);
+
+  --on-neutral-lower: var(--color-zinc-400);
+  --on-neutral-low: var(--color-zinc-300);
+  --on-neutral: var(--color-zinc-50);
+
+  /* Inverse */
+
+  --inverse-lower: var(--color-zinc-600);
+  --inverse-low: var(--color-zinc-700);
+  --inverse: var(--color-zinc-950);
+
+  /* Accent */
+
+  --accent-lowest: var(--color-violet-900);
+  --accent-lower: var(--color-violet-800);
+  --accent-low: var(--color-violet-600);
+  --accent: var(--color-violet-600);
+  --accent-high: var(--color-violet-700);
+  --accent-higher: var(--color-violet-800);
+  --accent-highest: var(--color-violet-900);
+
+  --on-accent: var(--color-zinc-50);
+
+  /* Success */
+
+  --success: var(--color-green-400);
+
+  /* Danger */
+
+  --danger-lowest: var(--color-red-900);
+  --danger-lower: var(--color-red-800);
+  --danger-low: var(--color-red-700);
+  --danger: var(--color-red-500);
+  --danger-high: var(--color-red-600);
+  --danger-higher: var(--color-red-700);
+
+  --on-danger: var(--color-zinc-50);
+
+  /* Info */
+
+  --info: var(--color-blue-400);
+}
diff --git a/packages/ui/src/styles/colors/index.css b/packages/ui/src/styles/colors/index.css
new file mode 100644
index 000000000..45086aaa9
--- /dev/null
+++ b/packages/ui/src/styles/colors/index.css
@@ -0,0 +1,58 @@
+@import './light.css';
+@import './dark.css';
+
+@theme inline {
+  /* Neutral */
+
+  --color-neutral-lowest: var(--neutral-lowest);
+  --color-neutral-lower: var(--neutral-lower);
+  --color-neutral-low: var(--neutral-low);
+  --color-neutral: var(--neutral);
+  --color-neutral-high: var(--neutral-high);
+  --color-neutral-higher: var(--neutral-higher);
+
+  --color-on-neutral-lower: var(--on-neutral-lower);
+  --color-on-neutral-low: var(--on-neutral-low);
+  --color-on-neutral: var(--on-neutral);
+
+  /* Inverse */
+
+  --color-inverse-lower: var(--inverse-lower);
+  --color-inverse-low: var(--inverse-low);
+  --color-inverse: var(--inverse);
+
+  --color-on-inverse-lower: var(--on-inverse-lower);
+  --color-on-inverse-low: var(--on-inverse-low);
+  --color-on-inverse: var(--on-inverse);
+
+  /* Accent */
+
+  --color-accent-lowest: var(--accent-lowest);
+  --color-accent-lower: var(--accent-lower);
+  --color-accent-low: var(--accent-low);
+  --color-accent: var(--accent);
+  --color-accent-high: var(--accent-high);
+  --color-accent-higher: var(--accent-higher);
+  --color-accent-highest: var(--accent-highest);
+
+  --color-on-accent: var(--on-accent);
+
+  /* Success */
+
+  --color-success: var(--success);
+
+  /* Danger */
+
+  --color-danger-lowest: var(--danger-lowest);
+  --color-danger-lower: var(--danger-lower);
+  --color-danger-low: var(--danger-low);
+  --color-danger: var(--danger);
+  --color-danger-high: var(--danger-high);
+  --color-danger-higher: var(--danger-higher);
+
+  --color-on-danger: var(--on-danger);
+
+  /* Info */
+
+  --color-info: var(--info);
+}
diff --git a/packages/ui/src/styles/colors/light.css b/packages/ui/src/styles/colors/light.css
new file mode 100644
index 000000000..ec030270f
--- /dev/null
+++ b/packages/ui/src/styles/colors/light.css
@@ -0,0 +1,55 @@
+:root {
+  /* Neutral */
+
+  --neutral-lowest: var(--color-white);
+  --neutral-lower: var(--color-slate-50);
+  --neutral-low: var(--color-slate-100);
+  --neutral: var(--color-slate-200);
+  --neutral-high: var(--color-slate-300);
+  --neutral-higher: var(--color-slate-400);
+
+  --on-neutral-lower: var(--color-slate-300);
+  --on-neutral-low: var(--color-slate-500);
+  --on-neutral: var(--color-slate-800);
+
+  /* Inverse */
+
+  --inverse-lower: var(--color-slate-600);
+  --inverse-low: var(--color-slate-700);
+  --inverse: var(--color-slate-900);
+
+  --on-inverse-lower: rgba(255, 255, 255, 0.2);
+  --on-inverse-low: var(--color-slate-300);
+  --on-inverse: var(--color-white);
+
+  /* Accent */
+
+  --accent-lowest: var(--color-violet-100);
+  --accent-lower: var(--color-violet-200);
+  --accent-low: var(--color-violet-400);
+  --accent: var(--color-violet-600);
+  --accent-high: var(--color-violet-700);
+  --accent-higher: var(--color-violet-800);
+  --accent-highest: var(--color-violet-900);
+
+  --on-accent: var(--color-white);
+
+  /* Success */
+
+  --success: var(--color-green-600);
+
+  /* Danger */
+
+  --danger-lowest: var(--color-red-100);
+  --danger-lower: var(--color-red-200);
+  --danger-low: var(--color-red-600);
+  --danger: var(--color-red-700);
+  --danger-high: var(--color-red-800);
+  --danger-higher: var(--color-red-900);
+
+  --on-danger: var(--color-white);
+
+  /* Info */
+
+  --info: var(--color-blue-700);
+}
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles/index.css
similarity index 73%
rename from packages/ui/src/styles.css
rename to packages/ui/src/styles/index.css
index e8e60d468..78215f2c6 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles/index.css
@@ -7,7 +7,7 @@
 
 @plugin 'tailwindcss-react-aria-components';
 
-@source '.';
+@source '..';
 
 @theme {
   --font-sans: 'DM Sans Variable', ui-sans-serif, system-ui, sans-serif;
@@ -21,3 +21,11 @@
     @slot;
   }
 }
+
+@import './colors/index.css';
+
+html {
+  @apply bg-neutral-lowest text-on-neutral;
+
+  scrollbar-color: var(--on-neutral-low) transparent;
+}
diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
index 70adb3a89..fbaa36ef3 100644
--- a/packages/ui/src/table.tsx
+++ b/packages/ui/src/table.tsx
@@ -21,13 +21,13 @@ export const Table = ({ children, className, containerClassName, ...props }: Tab
 
   return (
     <RAC.ResizableTableContainer
-      className={twMerge(tw`relative w-full overflow-auto rounded-lg border border-slate-200`, containerClassName)}
+      className={twMerge(tw`relative w-full overflow-auto rounded-lg border border-neutral`, containerClassName)}
       onScroll={props.onScroll}
     >
       <RAC.Table
         className={composeTailwindRenderProps(
           className,
-          tw`w-full overflow-hidden border-inherit text-md leading-5 text-slate-800`,
+          tw`w-full overflow-hidden border-inherit text-md leading-5 text-on-neutral`,
         )}
         // @ts-expect-error patched workaround until fixed upstream https://github.com/adobe/react-spectrum/issues/2328
         isKeyboardNavigationDisabled
@@ -51,7 +51,7 @@ export const TableHeader = <T extends object>({ children, className, columns, ..
       {...props}
       className={composeTailwindRenderProps(
         className,
-        tw`sticky top-0 z-10 border-b border-inherit bg-slate-50 font-medium tracking-tight`,
+        tw`sticky top-0 z-10 border-b border-inherit bg-neutral-lower font-medium tracking-tight`,
       )}
     >
       <RAC.Collection items={columns ?? []}>{children}</RAC.Collection>
@@ -80,7 +80,7 @@ export const TableColumn = ({ children, className, ...props }: TableColumnProps)
 
         {!props.width && (
           <RAC.ColumnResizer className={tw`absolute inset-y-0 right-0 z-10 translate-x-2 cursor-col-resize px-2`}>
-            <div className={tw`mx-auto h-full w-px bg-slate-200`} />
+            <div className={tw`mx-auto h-full w-px bg-neutral`} />
           </RAC.ColumnResizer>
         )}
       </>
@@ -113,7 +113,7 @@ export const TableRow = <T extends object>({ children, className, columns, ...pr
       {allowsDragging && (
         <TableCell className={tw`cursor-move px-1`}>
           <Button className={tw`p-1`} slot='drag' variant='ghost'>
-            <FiMove className={tw`size-3 text-slate-500`} />
+            <FiMove className={tw`size-3 text-on-neutral-low`} />
           </Button>
         </TableCell>
       )}
diff --git a/packages/ui/src/tag-group.tsx b/packages/ui/src/tag-group.tsx
index 4acd1ebed..823821d7c 100644
--- a/packages/ui/src/tag-group.tsx
+++ b/packages/ui/src/tag-group.tsx
@@ -15,9 +15,9 @@ export const Tag = ({ className, ...props }: TagProps) => (
       focusVisibleRingStyles(),
       tw`
         cursor-pointer rounded-sm bg-transparent px-2 py-1.5 text-xs leading-none font-medium tracking-tight
-        text-slate-400
+        text-on-neutral-low
 
-        selected:bg-white selected:text-slate-800 selected:shadow-sm
+        selected:bg-neutral-lowest selected:text-on-neutral selected:shadow-sm
       `,
     )}
   />
@@ -33,6 +33,6 @@ export interface TagGroupProps<T>
 export const TagGroup = <T extends object>({ children, label, ...props }: TagGroupProps<T>) => (
   <RAC.TagGroup {...props}>
     {label && <RAC.Label>{label}</RAC.Label>}
-    <RAC.TagList className={tw`flex gap-1 rounded-md bg-slate-100 p-0.5`}>{children}</RAC.TagList>
+    <RAC.TagList className={tw`flex gap-1 rounded-md bg-neutral-low p-0.5`}>{children}</RAC.TagList>
   </RAC.TagGroup>
 );
diff --git a/packages/ui/src/text-field.tsx b/packages/ui/src/text-field.tsx
index b50dd077d..e01bf2b6c 100644
--- a/packages/ui/src/text-field.tsx
+++ b/packages/ui/src/text-field.tsx
@@ -73,10 +73,10 @@ export const TextField = ({ children, className, error, label, ...props }: TextF
 
 export const textInputFieldStyles = tv({
   extend: focusVisibleRingStyles,
-  base: tw`rounded-md border border-slate-200 px-3 py-1.5 text-md leading-5 text-slate-800`,
+  base: tw`rounded-md border border-neutral px-3 py-1.5 text-md leading-5 text-on-neutral`,
   variants: {
     isTableCell: {
-      false: tw`disabled:bg-slate-100 disabled:opacity-50`,
+      false: tw`disabled:bg-neutral-low disabled:opacity-50`,
       true: tw`w-full min-w-0 rounded-none border-transparent px-5 py-1.5 -outline-offset-4`,
     },
   },
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
new file mode 100644
index 000000000..2e2f6354c
--- /dev/null
+++ b/packages/ui/src/theme.tsx
@@ -0,0 +1,39 @@
+import { Option, pipe } from 'effect';
+import { createContext, PropsWithChildren, use, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+const getStoreTheme = () => localStorage.getItem('theme') as Theme | undefined;
+const getSystemTheme = () => (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+export const setTheme = (theme?: Theme) => {
+  const systemTheme = getSystemTheme();
+  const storeTheme = theme ?? getStoreTheme() ?? systemTheme;
+
+  if (storeTheme === systemTheme) localStorage.removeItem('theme');
+  else localStorage.setItem('theme', storeTheme);
+
+  if (storeTheme === 'dark') document.documentElement.classList.add('dark');
+  else document.documentElement.classList.remove('dark');
+};
+
+interface ThemeContext {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext(Option.none<ThemeContext>());
+
+export const useTheme = () => pipe(use(ThemeContext), Option.getOrThrow);
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [theme, setThemeState] = useState(getStoreTheme() ?? getSystemTheme());
+
+  const toggleTheme = () => {
+    const nextTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(nextTheme);
+    setThemeState(nextTheme);
+  };
+
+  return <ThemeContext.Provider value={Option.some({ theme, toggleTheme })}>{children}</ThemeContext.Provider>;
+};
diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index f7d2e2116..9319d35e8 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -25,8 +25,8 @@ export const ToastRegion = () => {
       {({ toast }) => (
         <RAC.UNSTABLE_Toast
           className={tw`
-            flex flex-col gap-1 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm leading-5 font-medium
-            tracking-tight text-slate-800 shadow-xl
+            flex flex-col gap-1 rounded-md border border-neutral bg-white px-3 py-2 text-sm leading-5 font-medium
+            tracking-tight text-on-neutral shadow-xl
           `}
           toast={toast}
         >
@@ -34,7 +34,7 @@ export const ToastRegion = () => {
             <RAC.Text>{toast.content.title}</RAC.Text>
 
             <Button className={tw`p-0.5`} slot='close' variant='ghost'>
-              <FiX className={tw`size-4 text-slate-500`} />
+              <FiX className={tw`size-4 text-on-neutral-low`} />
             </Button>
           </div>
 
diff --git a/packages/ui/src/tree.tsx b/packages/ui/src/tree.tsx
index cec252d84..3e4011c37 100644
--- a/packages/ui/src/tree.tsx
+++ b/packages/ui/src/tree.tsx
@@ -63,17 +63,17 @@ export const TreeItem = <T extends object>({
         focusVisibleRingStyles(),
         tw`
           group/tree-item cursor-pointer rounded-md bg-transparent px-3 py-1.5 text-md leading-5 font-medium
-          tracking-tight text-slate-800
+          tracking-tight text-on-neutral
 
-          hover:bg-slate-100
+          hover:bg-neutral-low
 
-          active:bg-slate-200
+          active:bg-neutral
 
-          pressed:bg-slate-200
+          pressed:bg-neutral
 
-          selected:bg-slate-200
+          selected:bg-neutral
 
-          drop-target:bg-violet-200
+          drop-target:bg-accent-lower
         `,
       )}
       ref={(node) => {
@@ -103,7 +103,7 @@ export const TreeItem = <T extends object>({
               <RAC.Button className={tw`shrink-0 cursor-pointer`} slot='chevron'>
                 <ChevronSolidDownIcon
                   className={tw`
-                    size-5 rotate-0 p-1 text-slate-500 transition-transform
+                    size-5 rotate-0 p-1 text-on-neutral-low transition-transform
 
                     group-expanded/tree-item:rotate-90
                   `}
@@ -121,7 +121,7 @@ export const TreeItem = <T extends object>({
               {children}
               {allowsDragging && (
                 <Button className={tw`absolute right-0 -z-10 p-1 opacity-0 focus:z-10 focus:opacity-100`} slot='drag'>
-                  <FiMove className={tw`size-3 text-slate-500`} />
+                  <FiMove className={tw`size-3 text-on-neutral-low`} />
                 </Button>
               )}
             </div>
diff --git a/tools/eslint/config.ts b/tools/eslint/config.ts
index 641d485b9..8e53c07d9 100644
--- a/tools/eslint/config.ts
+++ b/tools/eslint/config.ts
@@ -62,7 +62,7 @@ const tailwind = defineConfig({
   rules: tailwindPlugin.configs['recommended']!.rules,
   settings: {
     'better-tailwindcss': {
-      entryPoint: resolve(root, 'packages/ui/src/styles.css'),
+      entryPoint: resolve(root, 'packages/ui/src/styles/index.css'),
 
       attributes: [],
       callees: [],