diff --git a/.changeset/good-falcons-remain.md b/.changeset/good-falcons-remain.md
new file mode 100644
index 0000000000..d7bd53691f
--- /dev/null
+++ b/.changeset/good-falcons-remain.md
@@ -0,0 +1,9 @@
+---
+"@cloudflare/local-explorer-ui": minor
+---
+
+Overhaul local explorer UI color palette.
+
+The core styles of the local explorer has been overhauled to remove all custom styles in favour of using Kumo styles / colors when possible.
+
+This is the first part of improving the local explorer UI to kumo-ify it all.
diff --git a/packages/local-explorer-ui/src/components/AddKVForm.tsx b/packages/local-explorer-ui/src/components/AddKVForm.tsx
index ea09deae1a..50885f9f33 100644
--- a/packages/local-explorer-ui/src/components/AddKVForm.tsx
+++ b/packages/local-explorer-ui/src/components/AddKVForm.tsx
@@ -63,9 +63,10 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 				<input
 					id="add-key"
 					className={cn(
-						"h-9 w-full rounded-md border border-border bg-bg px-3 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
+						"h-9 w-full rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle",
 						{
-							"border-danger focus:shadow-focus-danger": keyError,
+							"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":
+								keyError,
 						}
 					)}
 					placeholder="Key"
@@ -74,7 +75,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 					disabled={saving}
 				/>
 				{keyError && (
-					<span className="mt-1 text-xs text-danger">{keyError}</span>
+					<span className="mt-1 text-xs text-kumo-danger">{keyError}</span>
 				)}
 			</div>
 			<div className="flex w-full flex-1 flex-col lg:min-w-2xs">
@@ -83,7 +84,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 				</label>
 				<textarea
 					id="add-value"
-					className="max-h-32 min-h-9 w-full resize-none overflow-y-auto rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary lg:field-sizing-content"
+					className="max-h-32 min-h-9 w-full resize-none overflow-y-auto rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle lg:field-sizing-content"
 					placeholder="Value"
 					value={value}
 					onChange={(e) => setValue(e.target.value)}
diff --git a/packages/local-explorer-ui/src/components/Breadcrumbs.tsx b/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
index d222e128f8..9265797ed8 100644
--- a/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
+++ b/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
@@ -15,7 +15,7 @@ export function Breadcrumbs({
 	title,
 }: BreadcrumbsProps): JSX.Element {
 	return (
-		<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-border bg-bg-secondary px-6 py-4 text-sm">
+		<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-kumo-fill bg-kumo-elevated px-6 py-4 text-sm">
 			<KumoBreadcrumbs>
 				<KumoBreadcrumbs.Current icon={<Icon className="h-4 w-4" />}>
 					{title}
diff --git a/packages/local-explorer-ui/src/components/CopyButton.tsx b/packages/local-explorer-ui/src/components/CopyButton.tsx
index be4865e4cb..8e30c7064e 100644
--- a/packages/local-explorer-ui/src/components/CopyButton.tsx
+++ b/packages/local-explorer-ui/src/components/CopyButton.tsx
@@ -20,7 +20,7 @@ export function CopyButton({ text }: CopyButtonProps) {
 			className={cn(
 				"h-6 w-6 p-0 opacity-0 transition-[opacity,background-color,color] group-hover/cell:opacity-100",
 				{
-					"text-success opacity-100": copied,
+					"text-kumo-success opacity-100": copied,
 				}
 			)}
 			onClick={handleCopy}
diff --git a/packages/local-explorer-ui/src/components/KVTable.tsx b/packages/local-explorer-ui/src/components/KVTable.tsx
index 3f80da53cc..7445d42cba 100644
--- a/packages/local-explorer-ui/src/components/KVTable.tsx
+++ b/packages/local-explorer-ui/src/components/KVTable.tsx
@@ -41,7 +41,7 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
 					<Button
 						variant="ghost"
 						shape="square"
-						className="!h-7 !w-7"
+						className="h-7! w-7!"
 						aria-label="Actions"
 					>
 						<DotsThreeIcon size={16} weight="bold" />
@@ -55,7 +55,7 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
 				</DropdownMenu.Item>
 				<DropdownMenu.Separator />
 				<DropdownMenu.Item
-					className="flex items-center gap-2 text-danger"
+					className="flex items-center gap-2 text-kumo-danger"
 					onClick={onDelete}
 				>
 					<TrashIcon />
@@ -139,7 +139,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 	const isKeyInvalid = editData ? !!validateKey(editData.key) : false;
 
 	return (
-		<div className="overflow-hidden rounded-lg border border-border">
+		<div className="overflow-hidden rounded-lg border border-kumo-fill">
 			<Table>
 				<Table.Header>
 					<Table.Row>
@@ -165,9 +165,9 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 											<input
 												id={`edit-key-${entry.key.name}`}
 												className={cn(
-													"min-h-8 w-full rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
+													"min-h-8 w-full rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle",
 													{
-														"border-danger focus:shadow-focus-danger":
+														"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":
 															editData.keyError,
 													}
 												)}
@@ -178,21 +178,21 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 												autoFocus
 											/>
 											{editData.keyError && (
-												<span className="mt-1 text-xs text-danger">
+												<span className="mt-1 text-xs text-kumo-danger">
 													{editData.keyError}
 												</span>
 											)}
 										</div>
 									) : (
 										<div className="group/cell flex items-center gap-1.5">
-											<code className="font-medium text-primary">
+											<code className="font-medium text-kumo-link">
 												{entry.key.name}
 											</code>
 											<CopyButton text={entry.key.name} />
 										</div>
 									)}
 								</Table.Cell>
-								<Table.Cell className="group/cell max-w-[400px] font-mono text-[13px]">
+								<Table.Cell className="group/cell max-w-100 font-mono text-[13px]">
 									{isEditing && editData ? (
 										<div className="flex flex-col gap-2">
 											<label
@@ -203,7 +203,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 											</label>
 											<textarea
 												id={`edit-value-${entry.key.name}`}
-												className="[field-sizing:content] max-h-[200px] min-h-8 w-full resize-none overflow-y-auto rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
+												className="field-sizing-content max-h-50 min-h-8 w-full resize-none overflow-y-auto rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle"
 												value={editData.value}
 												onChange={(e) =>
 													setEditData({ ...editData, value: e.target.value })
@@ -235,7 +235,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 										<div className="flex min-w-0 items-center gap-1.5">
 											<span
 												className={cn("min-w-0 truncate", {
-													"text-text-secondary": !entry.value,
+													"text-kumo-subtle": !entry.value,
 												})}
 											>
 												{formatValue(entry.value)}
diff --git a/packages/local-explorer-ui/src/components/R2ObjectTable.tsx b/packages/local-explorer-ui/src/components/R2ObjectTable.tsx
index 00b5f40983..a83f4851f3 100644
--- a/packages/local-explorer-ui/src/components/R2ObjectTable.tsx
+++ b/packages/local-explorer-ui/src/components/R2ObjectTable.tsx
@@ -75,7 +75,7 @@ function ActionMenu({
 				)}
 
 				<DropdownMenu.Item
-					className="flex items-center gap-2 text-danger"
+					className="flex items-center gap-2 text-kumo-danger"
 					onClick={onDelete}
 				>
 					<TrashIcon />
@@ -134,7 +134,7 @@ function BulkActionMenu({
 					</>
 				)}
 				<DropdownMenu.Item
-					className="flex items-center gap-2 text-danger"
+					className="flex items-center gap-2 text-kumo-danger"
 					onClick={onDelete}
 				>
 					<TrashIcon />
@@ -230,7 +230,7 @@ export function R2ObjectTable({
 
 	if (items.length === 0) {
 		return (
-			<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
+			<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-kumo-subtle">
 				<h2 className="text-2xl font-medium">
 					{currentPrefix
 						? "No objects in this directory"
@@ -244,7 +244,7 @@ export function R2ObjectTable({
 	}
 
 	return (
-		<div className="overflow-hidden rounded-lg border border-border">
+		<div className="overflow-hidden rounded-lg border border-kumo-fill">
 			<Table>
 				<Table.Header>
 					<Table.Row>
@@ -290,21 +290,18 @@ export function R2ObjectTable({
 									</Table.Cell>
 									<Table.Cell>
 										<button
-											className="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-text hover:text-primary"
+											className="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-kumo-default hover:text-kumo-link"
 											onClick={() => onNavigateToPrefix(item.prefix)}
 										>
-											<FolderIcon
-												size={16}
-												className="text-orange-600 dark:text-orange-400"
-											/>
+											<FolderIcon size={16} className="text-kumo-brand-hover" />
 											<span className="font-medium">{displayName}</span>
 										</button>
 									</Table.Cell>
-									<Table.Cell className="text-text-secondary">
+									<Table.Cell className="text-kumo-subtle">
 										Directory
 									</Table.Cell>
-									<Table.Cell className="text-text-secondary">-</Table.Cell>
-									<Table.Cell className="text-text-secondary">-</Table.Cell>
+									<Table.Cell className="text-kumo-subtle">-</Table.Cell>
+									<Table.Cell className="text-kumo-subtle">-</Table.Cell>
 									<Table.Cell className="text-right whitespace-nowrap">
 										<ActionMenu
 											isDirectory
@@ -334,19 +331,19 @@ export function R2ObjectTable({
 									<Link
 										to="/r2/$bucketName/object/$"
 										params={{ bucketName, _splat: key }}
-										className="flex items-center gap-2 text-text no-underline hover:text-primary"
+										className="flex items-center gap-2 text-kumo-default no-underline hover:text-kumo-link"
 									>
-										<FileIcon size={16} className="text-muted" />
+										<FileIcon size={16} className="text-kumo-subtle" />
 										<span className="font-medium">{displayName}</span>
 									</Link>
 								</Table.Cell>
-								<Table.Cell className="font-mono text-xs text-text-secondary">
+								<Table.Cell className="font-mono text-xs text-kumo-subtle">
 									{contentType}
 								</Table.Cell>
-								<Table.Cell className="text-text-secondary">
+								<Table.Cell className="text-kumo-subtle">
 									{formatSize(obj.size)}
 								</Table.Cell>
-								<Table.Cell className="text-text-secondary">
+								<Table.Cell className="text-kumo-subtle">
 									{formatDate(obj.last_modified)}
 								</Table.Cell>
 								<Table.Cell className="text-right whitespace-nowrap">
diff --git a/packages/local-explorer-ui/src/components/R2UploadDialog.tsx b/packages/local-explorer-ui/src/components/R2UploadDialog.tsx
index 2ecd2830d3..a5b8a080d1 100644
--- a/packages/local-explorer-ui/src/components/R2UploadDialog.tsx
+++ b/packages/local-explorer-ui/src/components/R2UploadDialog.tsx
@@ -190,7 +190,7 @@ export function R2UploadDialog({
 				</Dialog.Title>
 
 				{error && (
-					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-3 text-sm text-danger">
+					<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-3 text-sm text-kumo-danger">
 						{error}
 					</div>
 				)}
@@ -199,8 +199,8 @@ export function R2UploadDialog({
 				<div
 					className={`mb-4 flex min-h-32 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors duration-200 ${
 						dragOver
-							? "border-primary bg-primary/5"
-							: "border-border hover:border-primary/50"
+							? "border-kumo-brand bg-kumo-brand/5"
+							: "border-kumo-fill hover:border-kumo-brand/50"
 					}`}
 					onClick={() => document.getElementById("file-input")?.click()}
 					onDragLeave={handleDragLeave}
@@ -214,21 +214,23 @@ export function R2UploadDialog({
 						type="file"
 					/>
 
-					<UploadIcon size={32} className="mb-2 text-text-secondary" />
+					<UploadIcon size={32} className="mb-2 text-kumo-subtle" />
 
 					{file ? (
 						<>
-							<p className="text-sm font-medium text-text">{file.name}</p>
-							<p className="text-xs text-text-secondary">
+							<p className="text-sm font-medium text-kumo-default">
+								{file.name}
+							</p>
+							<p className="text-xs text-kumo-subtle">
 								{(file.size / 1024).toFixed(1)} KB
 							</p>
 						</>
 					) : (
 						<>
-							<p className="text-sm text-text">
+							<p className="text-sm text-kumo-default">
 								Drop a file here or click to browse
 							</p>
-							<p className="text-xs text-text-secondary">
+							<p className="text-xs text-kumo-subtle">
 								Any file type supported
 							</p>
 						</>
@@ -237,28 +239,28 @@ export function R2UploadDialog({
 
 				{/* Object Key */}
 				<div className="mb-4">
-					<label className="mb-2 block text-sm font-medium text-text">
+					<label className="mb-2 block text-sm font-medium text-kumo-default">
 						Object key
 					</label>
 					<input
-						className="w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder-text-secondary! focus:border-primary focus:shadow-focus-primary focus:outline-none"
+						className="w-full rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 						onChange={(e) => setObjectKey(e.target.value)}
 						placeholder={currentPrefix + "file.png"}
 						type="text"
 						value={objectKey}
 					/>
-					<p className="mt-1 text-xs text-text-secondary">
+					<p className="mt-1 text-xs text-kumo-subtle">
 						The full path where the object will be stored
 					</p>
 				</div>
 
 				{/* Content Type */}
 				<div className="mb-4">
-					<label className="mb-2 block text-sm font-medium text-text">
+					<label className="mb-2 block text-sm font-medium text-kumo-default">
 						Content-Type
 					</label>
 					<input
-						className="w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder-text-secondary! focus:border-primary focus:shadow-focus-primary focus:outline-none"
+						className="w-full rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 						onChange={(e) => setContentType(e.target.value)}
 						placeholder="image/png"
 						type="text"
@@ -269,7 +271,7 @@ export function R2UploadDialog({
 				{/* Custom Metadata */}
 				<div className="mb-4">
 					<div className="mb-2 flex items-center justify-between">
-						<label className="text-sm font-medium text-text">
+						<label className="text-sm font-medium text-kumo-default">
 							Custom metadata
 						</label>
 						<Button variant="ghost" onClick={handleAddMetadata}>
@@ -279,7 +281,7 @@ export function R2UploadDialog({
 					</div>
 
 					{customMetadata.length === 0 ? (
-						<p className="text-sm text-text-secondary italic">
+						<p className="text-sm text-kumo-subtle italic">
 							No custom metadata
 						</p>
 					) : (
@@ -287,7 +289,7 @@ export function R2UploadDialog({
 							{customMetadata.map((entry, index) => (
 								<div key={index} className="flex items-center gap-2">
 									<input
-										className="flex-1 rounded-md border border-border bg-bg px-2 py-1.5 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none"
+										className="flex-1 rounded-md border border-kumo-fill bg-kumo-base px-2 py-1.5 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 										onChange={(e) =>
 											handleMetadataChange(index, "key", e.target.value)
 										}
@@ -296,7 +298,7 @@ export function R2UploadDialog({
 										value={entry.key}
 									/>
 									<input
-										className="flex-1 rounded-md border border-border bg-bg px-2 py-1.5 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none"
+										className="flex-1 rounded-md border border-kumo-fill bg-kumo-base px-2 py-1.5 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 										onChange={(e) =>
 											handleMetadataChange(index, "value", e.target.value)
 										}
diff --git a/packages/local-explorer-ui/src/components/SearchForm.tsx b/packages/local-explorer-ui/src/components/SearchForm.tsx
index 896b190400..53e287b94d 100644
--- a/packages/local-explorer-ui/src/components/SearchForm.tsx
+++ b/packages/local-explorer-ui/src/components/SearchForm.tsx
@@ -21,7 +21,7 @@ export function SearchForm({ onSearch, disabled = false }: SearchFormProps) {
 			</label>
 			<input
 				id="search-prefix"
-				className="h-9 max-w-100 flex-1 rounded-md border border-border bg-bg px-3 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
+				className="h-9 max-w-100 flex-1 rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle"
 				placeholder="Search keys by prefix..."
 				value={prefix}
 				onChange={(e) => setPrefix(e.target.value)}
diff --git a/packages/local-explorer-ui/src/components/Sidebar.tsx b/packages/local-explorer-ui/src/components/Sidebar.tsx
index 5bfbdeb88e..aee6d7f1f0 100644
--- a/packages/local-explorer-ui/src/components/Sidebar.tsx
+++ b/packages/local-explorer-ui/src/components/Sidebar.tsx
@@ -44,19 +44,19 @@ function SidebarItemGroup({
 }: SidebarItemGroupProps): JSX.Element {
 	return (
 		<Collapsible.Root defaultOpen className="py-0.5">
-			<Collapsible.Trigger className="group ml-1 flex w-[calc(100%-0.25rem)] cursor-pointer items-center gap-2 rounded-l-md bg-transparent p-3 text-xs font-semibold text-text transition-colors hover:bg-surface-tertiary">
+			<Collapsible.Trigger className="group ml-1 flex w-[calc(100%-0.25rem)] cursor-pointer items-center gap-2 rounded-l-md bg-transparent p-3 text-xs font-semibold text-kumo-default transition-colors hover:bg-kumo-brand/10">
 				<CaretRightIcon
-					className="h-3.5 w-3.5 text-muted transition-transform duration-200 group-data-panel-open:rotate-90"
+					className="h-3.5 w-3.5 text-kumo-subtle transition-transform duration-200 group-data-panel-open:rotate-90"
 					weight="bold"
 				/>
-				<Icon className="h-4 w-4 text-muted" />
+				<Icon className="h-4 w-4 text-kumo-subtle" />
 				{title}
 			</Collapsible.Trigger>
 
 			<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0">
-				<ul className="ml-3 list-none space-y-0.5 border-l border-border pl-3">
+				<ul className="ml-3 list-none space-y-0.5 border-l border-kumo-fill pl-3">
 					{error ? (
-						<li className="px-2 py-1.5 text-sm text-danger">{error}</li>
+						<li className="px-2 py-1.5 text-sm text-kumo-danger">{error}</li>
 					) : null}
 
 					{!error
@@ -64,9 +64,10 @@ function SidebarItemGroup({
 								<li key={item.id}>
 									<Link
 										className={cn(
-											"block cursor-pointer rounded-l-md px-2 py-2.5 text-sm text-text no-underline transition-colors hover:bg-surface-tertiary",
+											"block cursor-pointer rounded-l-md px-2 py-2.5 text-sm text-kumo-default no-underline transition-colors hover:bg-kumo-brand/10",
 											{
-												"bg-primary/10 font-medium text-primary": item.isActive,
+												"bg-kumo-brand/10 font-medium text-kumo-link hover:bg-kumo-brand/20":
+													item.isActive,
 											}
 										)}
 										params={item.link.params}
@@ -80,7 +81,7 @@ function SidebarItemGroup({
 						: null}
 
 					{!error && items.length === 0 && (
-						<li className="px-2 py-1.5 text-sm text-text-secondary italic">
+						<li className="px-2 py-1.5 text-sm text-kumo-subtle italic">
 							{emptyLabel}
 						</li>
 					)}
@@ -130,17 +131,17 @@ export function Sidebar({
 	const workerSearch = workers.length > 1 ? { worker: selectedWorker } : {};
 
 	return (
-		<aside className="flex w-sidebar flex-col border-r border-border bg-bg-secondary">
+		<aside className="flex w-sidebar flex-col border-r border-kumo-fill bg-kumo-elevated">
 			<a
 				className="box-border flex min-h-16.75 items-center gap-2.5 p-4"
 				href="/cdn-cgi/explorer/"
 			>
 				<CloudflareLogo variant="glyph" className="h-8 w-8 shrink-0" />
 				<div className="flex flex-col gap-px">
-					<span className="text-sm leading-tight font-semibold text-text">
+					<span className="text-sm leading-tight font-semibold text-kumo-default">
 						Local Explorer
 					</span>
-					<span className="text-[10px] font-medium tracking-wide text-text-secondary uppercase">
+					<span className="text-[10px] font-medium tracking-wide text-kumo-subtle uppercase">
 						Cloudflare DevTools
 					</span>
 				</div>
diff --git a/packages/local-explorer-ui/src/components/TableSelect.tsx b/packages/local-explorer-ui/src/components/TableSelect.tsx
index ba5ea90189..b0510ba4ed 100644
--- a/packages/local-explorer-ui/src/components/TableSelect.tsx
+++ b/packages/local-explorer-ui/src/components/TableSelect.tsx
@@ -51,10 +51,10 @@ export function TableSelect({
 			open={open}
 			value={selectedTable}
 		>
-			<Select.Trigger className="-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent p-2 text-sm text-text transition-colors hover:bg-border/50 data-popup-open:bg-border/50">
+			<Select.Trigger className="-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent p-2 text-sm text-kumo-default transition-colors hover:bg-kumo-fill data-popup-open:bg-kumo-fill">
 				{selectedTable ? <Select.Value /> : "Select table"}
 				<Select.Icon>
-					<CaretUpDownIcon className="h-3.5 w-3.5 text-text-secondary" />
+					<CaretUpDownIcon className="h-3.5 w-3.5 text-kumo-subtle" />
 				</Select.Icon>
 			</Select.Trigger>
 
@@ -66,10 +66,10 @@ export function TableSelect({
 					side="bottom"
 					sideOffset={4}
 				>
-					<Select.Popup className="max-h-72 min-w-36 overflow-hidden rounded-lg border border-border bg-bg shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
+					<Select.Popup className="max-h-72 min-w-36 overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
 						<div className="p-1">
 							<button
-								className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none hover:bg-bg-secondary dark:hover:bg-bg-tertiary"
+								className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-kumo-default transition-colors outline-none select-none hover:bg-kumo-elevated"
 								onClick={handleCreateTable}
 								type="button"
 							>
@@ -80,7 +80,7 @@ export function TableSelect({
 							</button>
 						</div>
 
-						<div className="mx-1 border-t border-border" />
+						<div className="mx-1 border-t border-kumo-fill" />
 
 						<Select.List className="p-1">
 							{tables.length > 0 ? (
@@ -90,7 +90,7 @@ export function TableSelect({
 
 									return (
 										<Select.Item
-											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
+											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-kumo-default transition-colors outline-none select-none data-highlighted:bg-kumo-elevated"
 											key={table.value}
 											value={table.value}
 										>
@@ -102,7 +102,7 @@ export function TableSelect({
 									);
 								})
 							) : (
-								<span className="flex w-full items-center justify-center gap-2 px-2 py-1.5 text-sm text-text-secondary">
+								<span className="flex w-full items-center justify-center gap-2 px-2 py-1.5 text-sm text-kumo-subtle">
 									No tables
 								</span>
 							)}
diff --git a/packages/local-explorer-ui/src/components/WorkerSelector.tsx b/packages/local-explorer-ui/src/components/WorkerSelector.tsx
index c78974b409..0da1f968e8 100644
--- a/packages/local-explorer-ui/src/components/WorkerSelector.tsx
+++ b/packages/local-explorer-ui/src/components/WorkerSelector.tsx
@@ -65,13 +65,13 @@ export function WorkerSelector({
 				open={open}
 				value={selectedWorker}
 			>
-				<Select.Trigger className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-2 text-sm text-text transition-colors hover:bg-bg-secondary data-popup-open:border-primary">
+				<Select.Trigger className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 text-sm text-kumo-default transition-colors hover:bg-kumo-elevated data-popup-open:border-kumo-brand">
 					<span className="flex items-center gap-2 truncate">
-						<TerminalIcon className="h-4 w-4 shrink-0 text-text-secondary" />
+						<TerminalIcon className="h-4 w-4 shrink-0 text-kumo-subtle" />
 						<span className="truncate">{selectedWorker}</span>
 					</span>
 					<Select.Icon>
-						<CaretUpDownIcon className="h-3.5 w-3.5 shrink-0 text-text-secondary" />
+						<CaretUpDownIcon className="h-3.5 w-3.5 shrink-0 text-kumo-subtle" />
 					</Select.Icon>
 				</Select.Trigger>
 
@@ -83,7 +83,7 @@ export function WorkerSelector({
 						side="bottom"
 						sideOffset={4}
 					>
-						<Select.Popup className="max-h-72 min-w-48 overflow-hidden rounded-lg border border-border bg-bg shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
+						<Select.Popup className="max-h-72 min-w-48 overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
 							<Select.List className="p-1">
 								{workers.map((worker) => {
 									const isSelected = selectedWorker === worker.name;
@@ -91,20 +91,20 @@ export function WorkerSelector({
 
 									return (
 										<Select.Item
-											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm text-text transition-colors outline-none select-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
+											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm text-kumo-default transition-colors outline-none select-none data-highlighted:bg-kumo-elevated"
 											key={worker.name}
 											value={worker.name}
 										>
 											<span className="flex w-4 items-center">
 												<Icon
-													className={`h-3.5 w-3.5 ${isSelected ? "" : "text-text-secondary"}`}
+													className={`h-3.5 w-3.5 ${isSelected ? "" : "text-kumo-subtle"}`}
 												/>
 											</span>
 											<Select.ItemText>
 												<span className="flex items-center gap-2">
 													{worker.name}
 													{worker.isSelf && selfWorker && (
-														<span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+														<span className="rounded bg-kumo-brand/10 px-1.5 py-0.5 text-[10px] font-medium text-kumo-link">
 															current
 														</span>
 													)}
diff --git a/packages/local-explorer-ui/src/components/studio/Code/Block.tsx b/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
index be67412096..744559d172 100644
--- a/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
@@ -11,7 +11,7 @@ export function CodeBlock({
 }: CodeBlockProps): JSX.Element {
 	return (
 		<pre
-			className="overflow-auto rounded bg-surface-secondary p-3 font-mono text-sm"
+			className="overflow-auto rounded bg-kumo-elevated p-3 font-mono text-sm"
 			data-language={language}
 			style={maxHeight ? { maxHeight } : undefined}
 		>
diff --git a/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx b/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
index 5e5af49d39..b1859d4784 100644
--- a/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
@@ -116,7 +116,7 @@ function describeExplainNode(d: string): {
 			label: (
 				<div className="flex items-center">
 					<strong>SCAN </strong>
-					<span className="mx-2 flex items-center gap-2 rounded border border-border p-1">
+					<span className="mx-2 flex items-center gap-2 rounded border border-kumo-fill p-1">
 						<TableIcon />
 						{d.substring("SCAN ".length)}
 					</span>
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx b/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
index c9c2b47895..7103268ab1 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
@@ -73,7 +73,7 @@ export function DropTableConfirmationModal({
 							<input
 								autoComplete="off"
 								autoFocus
-								className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm"
+								className="w-full rounded-md border border-kumo-fill bg-transparent px-3 py-2 text-sm"
 								onChange={(e) => setChallengeInput(e.target.value)}
 								value={challengeInput}
 							/>
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx b/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
index 09edad15e8..1652a27a0f 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
@@ -51,7 +51,7 @@ export function StudioExportOptionEditor({
 				<SettingLabel>Filename</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 font-mono text-sm"
+						className="w-full rounded-md border border-kumo-fill px-3 py-2 font-mono text-sm"
 						onChange={(e): void => {
 							onChange((prev) => ({
 								...prev,
@@ -82,7 +82,7 @@ function SQLExportEditor({
 				<SettingLabel>Batch Size</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-right font-mono text-sm"
+						className="w-full rounded-md border border-kumo-fill px-3 py-2 text-right font-mono text-sm"
 						onChange={(e): void => {
 							const batchSize = Number(e.target.value);
 							if (isNaN(batchSize) || batchSize < 1) {
@@ -111,7 +111,7 @@ function SQLExportEditor({
 				</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-right font-mono text-sm"
+						className="w-full rounded-md border border-kumo-fill px-3 py-2 text-right font-mono text-sm"
 						onChange={(e): void => {
 							const maxStatementLength = Number(e.target.value);
 							if (isNaN(maxStatementLength) || maxStatementLength < 1) {
@@ -135,7 +135,7 @@ function SQLExportEditor({
 				<SettingLabel>Table Name</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 font-mono text-sm"
+						className="w-full rounded-md border border-kumo-fill px-3 py-2 font-mono text-sm"
 						onChange={(e): void => {
 							onChange((prev) => ({
 								...prev,
@@ -248,7 +248,7 @@ function SettingItem({ children, lastItem }: SettingItemProps): JSX.Element {
 		<div
 			className={cn(
 				"flex min-h-14 items-center justify-between gap-4 px-4",
-				lastItem ? "" : "border-b border-border"
+				lastItem ? "" : "border-b border-kumo-fill"
 			)}
 		>
 			{children}
@@ -277,7 +277,7 @@ function SettingOptionDropdown({
 }: SettingOptionDropdownProps): JSX.Element {
 	return (
 		<select
-			className="cursor-pointer rounded-md border border-border bg-transparent px-3 py-2 text-sm"
+			className="cursor-pointer rounded-md border border-kumo-fill bg-transparent px-3 py-2 text-sm"
 			onChange={(e: ChangeEvent<HTMLSelectElement>): void => {
 				onChange(e.target.value);
 			}}
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx b/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
index 8e68989f25..a77e6804dd 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
@@ -84,12 +84,12 @@ export function StudioExportModal({
 				</Dialog.Description>
 
 				<div className="mt-4 flex flex-col gap-4">
-					<div className="rounded-lg border border-border text-base shadow-xs">
+					<div className="rounded-lg border border-kumo-fill text-base shadow-xs">
 						<StudioExportOptionEditor value={option} onChange={setOption} />
 					</div>
 
 					{error && (
-						<div className="rounded-md bg-red-50 p-3 text-red-700 dark:bg-red-900 dark:text-white">
+						<div className="rounded-md bg-kumo-danger/10 p-3 text-kumo-danger">
 							{error}
 						</div>
 					)}
diff --git a/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx b/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
index 5ca3bd736e..3c6c8d1e3a 100644
--- a/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
+++ b/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
@@ -46,7 +46,7 @@ export function StudioQueryResultTab({
 				<StudioResultTable state={state} arrangeHeaderIndex={headerIndexList} />
 			</div>
 
-			<div className="flex h-11 shrink-0 items-center border-t border-border">
+			<div className="flex h-11 shrink-0 items-center border-t border-kumo-fill">
 				<div className="grow px-4 text-base">
 					<Button
 						aria-label="Export query results"
diff --git a/packages/local-explorer-ui/src/components/studio/SQLEditor/SQLThemePlugin.tsx b/packages/local-explorer-ui/src/components/studio/SQLEditor/SQLThemePlugin.tsx
index ddbe693ce6..ef53caec0e 100644
--- a/packages/local-explorer-ui/src/components/studio/SQLEditor/SQLThemePlugin.tsx
+++ b/packages/local-explorer-ui/src/components/studio/SQLEditor/SQLThemePlugin.tsx
@@ -23,82 +23,71 @@ export const StudioSQLBaseTheme = EditorView.baseTheme({
 	},
 });
 
-/**
- * Unified CodeMirror theme that uses CSS custom properties from tailwind.css.
- * Automatically adapts to light/dark mode via prefers-color-scheme media queries
- * without needing any runtime dark mode detection.
- */
 export const StudioSQLTheme = EditorView.baseTheme({
-	/* Cursor — ensure the caret is visible against both light and dark backgrounds */
 	".cm-content": {
-		caretColor: "var(--color-text)",
+		caretColor: "var(--studio-editor-caret)",
 	},
 
-	/* Selection highlight */
 	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
-		backgroundColor: "var(--color-selection) !important",
+		backgroundColor: "var(--studio-editor-selection) !important",
 	},
 
-	/* Active line */
 	".cm-activeLine": {
-		backgroundColor: "var(--color-active-line)",
+		backgroundColor: "var(--studio-editor-active-line)",
 	},
 	".cm-activeLineGutter": {
-		backgroundColor: "var(--color-active-line)",
+		backgroundColor: "var(--studio-editor-active-line)",
 	},
 
-	/* Syntax token colors */
 	".tok-keyword": {
-		color: "var(--color-syntax-keyword)",
+		color: "var(--studio-syntax-keyword)",
 	},
 	".tok-string": {
-		color: "var(--color-syntax-string)",
+		color: "var(--studio-syntax-string)",
 	},
 	".tok-number": {
-		color: "var(--color-syntax-number)",
+		color: "var(--studio-syntax-number)",
 	},
 	".tok-comment": {
-		color: "var(--color-syntax-comment)",
+		color: "var(--studio-syntax-comment)",
 	},
 	".tok-operator": {
-		color: "var(--color-syntax-operator)",
+		color: "var(--studio-syntax-operator)",
 	},
 
 	".cm-table-name": {
-		color: "var(--color-syntax-table)",
+		color: "var(--studio-syntax-table)",
 	},
 
-	/* Gutters */
 	".cm-gutters": {
-		backgroundColor: "var(--color-bg-secondary)",
-		color: "var(--color-muted)",
+		backgroundColor: "var(--studio-editor-gutter-bg)",
+		color: "var(--studio-editor-gutter-text)",
 		borderRight: "none",
 		width: "30px",
 	},
 
-	/* Autocomplete tooltip */
 	".cm-tooltip-autocomplete": {
-		backgroundColor: "var(--color-bg)",
-		color: "var(--color-text)",
-		border: "1px solid var(--color-border)",
+		backgroundColor: "var(--studio-editor-panel-bg)",
+		color: "var(--studio-editor-panel-text)",
+		border: "1px solid var(--studio-editor-panel-border)",
 		borderRadius: "6px",
 		boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
 	},
 
 	".cm-completionLabel": {
-		color: "var(--color-text)",
+		color: "var(--studio-editor-panel-text)",
 	},
 	".cm-completionIcon": {
-		color: "var(--color-muted)",
+		color: "var(--studio-editor-gutter-text)",
 	},
 	".cm-completionDetail": {
-		color: "var(--color-muted)",
+		color: "var(--studio-editor-gutter-text)",
 		fontStyle: "italic",
 		marginLeft: "auto",
 	},
 	".cm-tooltip-autocomplete > ul > li[aria-selected]": {
-		backgroundColor: "var(--color-accent)",
+		backgroundColor: "var(--studio-editor-panel-hover)",
 		borderRadius: "3px",
-		color: "var(--color-text)",
+		color: "var(--studio-editor-panel-text)",
 	},
 });
diff --git a/packages/local-explorer-ui/src/components/studio/SQLEditor/StatementHighlightExtension.ts b/packages/local-explorer-ui/src/components/studio/SQLEditor/StatementHighlightExtension.ts
index e32097055f..2e7a7682b1 100644
--- a/packages/local-explorer-ui/src/components/studio/SQLEditor/StatementHighlightExtension.ts
+++ b/packages/local-explorer-ui/src/components/studio/SQLEditor/StatementHighlightExtension.ts
@@ -259,7 +259,7 @@ const SqlStatementStateField = StateField.define({
 
 const SqlStatementTheme = EditorView.baseTheme({
 	".cm-highlight-statement": {
-		borderLeft: "3px solid #ff9ff3 !important",
+		borderLeft: "3px solid var(--studio-statement-highlight-border) !important",
 	},
 });
 
diff --git a/packages/local-explorer-ui/src/components/studio/SkeletonBlock.tsx b/packages/local-explorer-ui/src/components/studio/SkeletonBlock.tsx
index 23c90a6a7c..d24de78953 100644
--- a/packages/local-explorer-ui/src/components/studio/SkeletonBlock.tsx
+++ b/packages/local-explorer-ui/src/components/studio/SkeletonBlock.tsx
@@ -20,7 +20,7 @@ export function SkeletonBlock({
 	return (
 		<div
 			className={cn(
-				"relative overflow-hidden rounded-md bg-surface-tertiary",
+				"relative overflow-hidden rounded-md bg-kumo-interact",
 				"before:absolute before:inset-0 before:animate-pulse before:bg-linear-to-r before:from-transparent before:via-white/20 before:to-transparent",
 				className
 			)}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx b/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
index ddf3a2a0cb..ee01ce37e2 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
@@ -246,21 +246,21 @@ function renderCellList<HeaderMetadata = unknown>({
 
 		let textClass = "flex items-center justify-end h-full pr-2 font-mono";
 		let tdClass =
-			"sticky left-0 bg-bg-secondary border-r border-b border-border";
+			"sticky left-0 bg-kumo-elevated border-r border-b border-kumo-fill";
 
 		if (state.getSelectedRowIndex().includes(absoluteRowIndex)) {
 			if (state.isFullSelectionRow(absoluteRowIndex)) {
 				textClass = cn(
 					"flex h-full items-center justify-end pr-2 font-mono",
-					"bg-surface-secondary font-bold text-text"
+					"bg-kumo-elevated font-bold text-kumo-default"
 				);
 				tdClass =
-					"sticky left-0 bg-surface-secondary dark:bg-blue-800 border-r border-b border-border";
+					"sticky left-0 bg-kumo-elevated border-r border-b border-kumo-fill";
 			} else {
 				textClass =
-					"flex items-center justify-end h-full pr-2 font-mono text-text font-bold";
+					"flex items-center justify-end h-full pr-2 font-mono text-kumo-default font-bold";
 				tdClass =
-					"sticky left-0 bg-surface-secondary border-r border-b border-border";
+					"sticky left-0 bg-kumo-elevated border-r border-b border-kumo-fill";
 			}
 		}
 
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
index ee50f8ba1f..741688a200 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
@@ -49,33 +49,30 @@ export function StudioTableCell<HeaderMetadata = unknown>({
 
 	if (isSelected) {
 		if (isRemoved) {
-			cellBackgroundColor = "bg-red-200 dark:bg-red-800";
+			cellBackgroundColor = "bg-kumo-danger/20";
 		} else if (isChanged) {
-			cellBackgroundColor = "bg-yellow-200 dark:bg-yellow-600";
+			cellBackgroundColor = "bg-kumo-warning/20";
 		} else if (isNew) {
-			cellBackgroundColor = "bg-green-200 dark:bg-green-700";
+			cellBackgroundColor = "bg-kumo-success/20";
 		} else {
 			cellBackgroundColor = "";
 		}
 	} else if (isChanged) {
-		cellBackgroundColor = "bg-[#ffe693] dark:bg-[#916b20]";
+		cellBackgroundColor = "bg-kumo-warning/30";
 	} else if (isNew) {
-		cellBackgroundColor = "bg-green-100 dark:bg-green-900";
+		cellBackgroundColor = "bg-kumo-success/10";
 	} else if (isRemoved) {
-		cellBackgroundColor = "bg-red-100 dark:bg-red-900";
+		cellBackgroundColor = "bg-kumo-danger/10";
 	}
 
 	return (
 		<td
 			className={cn(
-				"box-border overflow-hidden border-r border-b border-border hover:bg-accent",
-				isSelected && "border-neutral-900 dark:border-neutral-100",
-				isBorderBottom &&
-					"border-b border-b-neutral-900 dark:border-b-neutral-100",
-				isBorderRight &&
-					"border-r border-r-neutral-900 dark:border-r-neutral-100",
-				isFocus &&
-					"shadow-[0_0_0_1px_rgba(0,0,0,0.5)_inset] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.5)_inset]",
+				"box-border overflow-hidden border-r border-b border-kumo-fill hover:bg-kumo-overlay",
+				isSelected && "border-kumo-default",
+				isBorderBottom && "border-b-kumo-default border-b",
+				isBorderRight && "border-r-kumo-default border-r",
+				isFocus && "shadow-[inset_0_0_0_1px_var(--color-kumo-default)]",
 				isSticky && "sticky",
 				cellBackgroundColor
 			)}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx b/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
index 9a4f22686b..8f59cd6b9b 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
@@ -23,7 +23,7 @@ export function StudioTableHeaderList<HeaderMetadata = unknown>({
 		<thead className="contents">
 			<tr className="contents">
 				{headers.length > 0 && (
-					<th className="sticky top-0 left-0 z-30 border-r border-b border-border bg-bg-secondary"></th>
+					<th className="sticky top-0 left-0 z-30 border-r border-b border-kumo-fill bg-kumo-elevated"></th>
 				)}
 
 				{headers.map((header, idx) => {
@@ -65,7 +65,7 @@ function StudioTableHeader<HeaderMetadata = unknown>({
 		<th
 			className={cn(
 				{ "z-30": sticky },
-				"sticky top-0 z-10 flex h-8.75 overflow-hidden border-r border-b border-border bg-background p-0 text-left leading-8.75"
+				"sticky top-0 z-10 flex h-8.75 overflow-hidden border-r border-b border-kumo-fill bg-kumo-base p-0 text-left leading-8.75"
 			)}
 			key={header.name}
 			onContextMenu={onContextMenu}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
index 1939f74635..a2344c60e5 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
@@ -69,7 +69,7 @@ function BlobCellValue({ value, vector }: BlobCellValueProps): JSX.Element {
 
 	return (
 		<div className="flex w-full">
-			<span className="flex-1 truncate text-orange-600 dark:text-orange-400">
+			<span className="flex-1 truncate text-kumo-warning">
 				{prettifyBytes(bytes.subarray(0, 64))}
 			</span>
 			<div className="ml-2 flex-col items-center justify-center">
@@ -91,7 +91,7 @@ export const StudioTableDisplayCell = forwardRef<
 	const isAlignRight = align === "right";
 
 	const textBaseStyle = cn(
-		"flex grow text-muted",
+		"flex grow text-kumo-subtle",
 		isAlignRight ? "justify-end" : ""
 	);
 
@@ -115,9 +115,11 @@ export const StudioTableDisplayCell = forwardRef<
 			const firstLine = hasLineBreak ? value.slice(0, newlineIndex) : value;
 
 			return (
-				<span className={cn("flex-1 truncate", "text-text")}>
+				<span className={cn("flex-1 truncate", "text-kumo-default")}>
 					{firstLine}
-					{hasLineBreak && <span className="ml-1 font-sans text-muted">⏎</span>}
+					{hasLineBreak && (
+						<span className="ml-1 font-sans text-kumo-subtle">⏎</span>
+					)}
 				</span>
 			);
 		}
@@ -127,7 +129,7 @@ export const StudioTableDisplayCell = forwardRef<
 				<span
 					className={cn(
 						"flex-1 truncate",
-						"block grow text-right text-blue-700 dark:text-blue-300"
+						"block grow text-right text-kumo-link"
 					)}
 				>
 					{value}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
index dfd83eec20..8042f402a6 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
@@ -94,7 +94,7 @@ function InputCellEditor({
 			{popover &&
 				createPortal(
 					<div
-						className="fixed flex flex-col rounded border border-border bg-surface shadow"
+						className="fixed flex flex-col rounded border border-kumo-fill bg-kumo-base shadow"
 						ref={refs.setFloating}
 						style={{
 							...(floatingStyles as React.CSSProperties),
@@ -205,7 +205,7 @@ function PopoverEditor({
 					ref={editorRef}
 				/>
 			</div>
-			<div className="flex justify-end border-t border-border p-2">
+			<div className="flex justify-end border-t border-kumo-fill p-2">
 				<Button
 					onClick={() => {
 						onApply(editorRef.current?.getValue());
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/ResultTableContextMenu.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/ResultTableContextMenu.tsx
index 9122d08229..c716171e70 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/ResultTableContextMenu.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/ResultTableContextMenu.tsx
@@ -122,7 +122,7 @@ export function useStudioResultTableContextMenu(
 							label: (
 								<div>
 									<div>UUID</div>
-									<div className="font-mono text-muted">{uuid}</div>
+									<div className="font-mono text-kumo-subtle">{uuid}</div>
 								</div>
 							),
 							onClick: () => {
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
index d218789b1f..4b5c868c02 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
@@ -170,7 +170,7 @@ export function StudioResultTable({
 						{hasColumnInfo && (
 							<>
 								<DropdownMenu.Separator />
-								<span className="px-3 py-1.5 text-xs font-medium text-muted">
+								<span className="px-3 py-1.5 text-xs font-medium text-kumo-subtle">
 									Constraints and Indexes
 								</span>
 							</>
@@ -182,7 +182,7 @@ export function StudioResultTable({
 								icon={
 									<KeyIcon
 										weight="duotone"
-										className="size-5 text-green-600 dark:text-green-400"
+										className="size-5 text-kumo-success"
 									/>
 								}
 								title={"Primary Key"}
@@ -196,9 +196,8 @@ export function StudioResultTable({
 									<KeyIcon
 										weight="duotone"
 										className={cn("size-5", {
-											"text-blue-600 dark:text-blue-400": idx.type === "KEY",
-											"text-orange-600 dark:text-orange-400":
-												idx.type === "UNIQUE",
+											"text-kumo-link": idx.type === "KEY",
+											"text-kumo-warning": idx.type === "UNIQUE",
 										})}
 									/>
 								}
@@ -213,7 +212,7 @@ export function StudioResultTable({
 								icon={
 									<FlowArrowIcon
 										weight="duotone"
-										className="size-5 text-blue-600 dark:text-blue-400"
+										className="size-5 text-kumo-link"
 									/>
 								}
 								title={"Reference To"}
@@ -225,9 +224,7 @@ export function StudioResultTable({
 								description={
 									header.metadata.columnSchema.constraint.generatedExpression
 								}
-								icon={
-									<SigmaIcon className="size-5 text-purple-600 dark:text-purple-400" />
-								}
+								icon={<SigmaIcon className="size-5 text-kumo-brand" />}
 								title={"Generated Expression"}
 							/>
 						)}
@@ -304,7 +301,7 @@ function HeaderDropdownMenu({
 				render={(props) => (
 					<div
 						{...props}
-						className="flex h-9 w-full cursor-pointer items-center gap-1 bg-surface px-2 py-1 font-mono"
+						className="flex h-9 w-full cursor-pointer items-center gap-1 bg-kumo-base px-2 py-1 font-mono"
 						onContextMenu={(e): void => {
 							e.preventDefault();
 							e.stopPropagation();
@@ -345,7 +342,7 @@ function DropdownMenuColumnInfo({
 			{icon}
 			<div className="flex flex-col gap-0.5">
 				<div className="font-medium">{title}</div>
-				<div className="text-sm text-muted">{description}</div>
+				<div className="text-sm text-kumo-subtle">{description}</div>
 			</div>
 		</DropdownMenu.Item>
 	);
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
index 933347e996..9c98aa0e0d 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
@@ -175,18 +175,18 @@ export function StudioColumnSchemaEditor({
 		<tr
 			className={
 				highlightSchemaChanges && column.new && !column.old
-					? "bg-green-100 dark:bg-green-800"
+					? "bg-kumo-success/20"
 					: ""
 			}
 			key={column.key}
 		>
-			<td className="h-10 border border-border p-2 text-center">
+			<td className="h-10 border border-kumo-fill p-2 text-center">
 				{columnIndex + 1}
 			</td>
 
 			<td
 				className={cn(
-					"border border-border p-2 text-center",
+					"border border-kumo-fill p-2 text-center",
 					!readOnlyExistingColumns && "cursor-pointer"
 				)}
 				onClick={!readOnlyExistingColumns ? onPrimaryKeyClicked : undefined}
@@ -200,13 +200,13 @@ export function StudioColumnSchemaEditor({
 				)}
 			</td>
 
-			<td className="border border-border p-2 font-mono">
+			<td className="border border-kumo-fill p-2 font-mono">
 				{editableColumn.name}
 			</td>
 
-			<td className="border border-border p-2">{editableColumn.type}</td>
+			<td className="border border-kumo-fill p-2">{editableColumn.type}</td>
 
-			<td className="border border-border p-2 text-center">
+			<td className="border border-kumo-fill p-2 text-center">
 				<Checkbox
 					aria-label="Is nullable"
 					checked={!editableColumn.constraint?.notNull}
@@ -217,18 +217,18 @@ export function StudioColumnSchemaEditor({
 				/>
 			</td>
 
-			<td className="border border-border p-2 font-mono">
+			<td className="border border-kumo-fill p-2 font-mono">
 				{JSON.stringify(editableColumn.constraint?.defaultValue)}
 			</td>
 
-			<td className="border border-border p-2">
+			<td className="border border-kumo-fill p-2">
 				<ColumnConstraintDescription
 					column={editableColumn}
 					constraints={value.constraints}
 				/>
 			</td>
 
-			<td className="border border-border p-2 text-center">
+			<td className="border border-kumo-fill p-2 text-center">
 				<DropdownMenu>
 					<DropdownMenu.Trigger
 						render={
@@ -345,8 +345,8 @@ function ColumnConstraintBadge({
 	name,
 }: ColumnConstraintBadgeProps): JSX.Element {
 	return (
-		<div className="inline-flex items-center gap-1 overflow-hidden rounded border border-border">
-			<div className="flex items-center border-r border-border bg-accent p-1">
+		<div className="inline-flex items-center gap-1 overflow-hidden rounded border border-kumo-fill">
+			<div className="flex items-center border-r border-kumo-fill bg-kumo-overlay p-1">
 				{IconComponent && <IconComponent className="mr-1" />} {name}
 			</div>
 
@@ -433,7 +433,7 @@ export function StudioColumnEditorModal({
 						</Label>
 						<input
 							autoFocus
-							className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm"
+							className="w-full rounded-md border border-kumo-fill bg-transparent px-3 py-2 text-sm"
 							onChange={(e): void => {
 								setValue(
 									produce(value, (draft) => {
@@ -449,7 +449,7 @@ export function StudioColumnEditorModal({
 					<div className="w-full">
 						<Label>Data type</Label>
 						<select
-							className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm"
+							className="w-full rounded-md border border-kumo-fill bg-transparent px-3 py-2 text-sm"
 							onChange={(e): void => {
 								const newType = e.target.value;
 								if (!newType) {
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
index 274567007e..b8d11c1c75 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
@@ -32,11 +32,11 @@ export function StudioConstraintListEditor({
 			<table className="w-full border-collapse">
 				<thead>
 					<tr>
-						<th className="h-10 w-12 border border-border p-2">#</th>
-						<th className="h-10 w-32 border border-border p-2 text-left">
+						<th className="h-10 w-12 border border-kumo-fill p-2">#</th>
+						<th className="h-10 w-32 border border-kumo-fill p-2 text-left">
 							Type
 						</th>
-						<th className="border border-border p-2 text-left"></th>
+						<th className="border border-kumo-fill p-2 text-left"></th>
 					</tr>
 				</thead>
 
@@ -69,19 +69,21 @@ export function StudioConstraintListEditor({
 							return (
 								<tr key={constriantIndex}>
 									<td
-										className="border border-border p-2 text-center"
+										className="border border-kumo-fill p-2 text-center"
 										style={{ height: 40 }}
 									>
 										{constriantIndex + 1}
 									</td>
-									<td className="border border-border p-2">{constraintType}</td>
-									<td className="border border-border p-2">
+									<td className="border border-kumo-fill p-2">
+										{constraintType}
+									</td>
+									<td className="border border-kumo-fill p-2">
 										{constraint.foreignKey && (
 											<div className="flex gap-2">
 												{(constraint.foreignKey.columns ?? []).map(
 													(column, columnIndex) => (
 														<div
-															className="inline-block items-center gap-2 rounded border border-border bg-accent p-1 px-2 font-mono select-none"
+															className="inline-block items-center gap-2 rounded border border-kumo-fill bg-kumo-overlay p-1 px-2 font-mono select-none"
 															key={columnIndex}
 														>
 															{column} <ArrowRightIcon />{" "}
@@ -183,7 +185,7 @@ function SortableColumnItem({ id }: SortableColumnItemProps): JSX.Element {
 
 	return (
 		<div
-			className="inline-block cursor-pointer rounded border border-border bg-accent p-1 px-2 font-mono select-none hover:border-active-line"
+			className="inline-block cursor-pointer rounded border border-kumo-fill bg-kumo-overlay p-1 px-2 font-mono select-none hover:border-kumo-brand"
 			ref={setNodeRef}
 			style={{
 				transform: CSS.Transform.toString(transform),
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
index 8e0b1a5aee..0dde9488d6 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
@@ -138,14 +138,14 @@ export function StudioTableSchemaEditor({
 			defaultSize={250}
 			minSize={150}
 			primary="second"
-			resizerClassName="!bg-resizer border-transparent"
+			resizerClassName="!bg-kumo-fill border-transparent"
 			split="horizontal"
 		>
-			<div className="flex h-full w-full flex-col overflow-hidden bg-surface text-xs">
-				<div className="flex gap-2 border-b border-border p-4 py-2 shadow-xs">
+			<div className="flex h-full w-full flex-col overflow-hidden bg-kumo-elevated text-xs">
+				<div className="flex gap-2 border-b border-kumo-elevated p-4 py-2 shadow-xs">
 					<input
 						autoFocus
-						className="h-9 w-62.5 rounded-lg border border-border bg-transparent px-3 text-base"
+						className="h-9 w-62.5 rounded-lg border border-kumo-fill bg-transparent px-3 text-base"
 						onChange={(e) => handleNameChange(e.target.value)}
 						placeholder="Table name"
 						value={value.name.new ?? ""}
@@ -172,26 +172,26 @@ export function StudioTableSchemaEditor({
 						<table className="w-full border-collapse">
 							<thead className="sticky top-0">
 								<tr>
-									<th className="w-10 border border-border p-2 text-center">
+									<th className="w-10 border border-kumo-fill p-2 text-center">
 										#
 									</th>
-									<th className="w-10 border border-border p-2 text-center">
+									<th className="w-10 border border-kumo-fill p-2 text-center">
 										<KeyIcon />
 									</th>
-									<th className="w-50 border border-border p-2 text-left">
+									<th className="w-50 border border-kumo-fill p-2 text-left">
 										Column Name
 									</th>
-									<th className="w-25 border border-border p-2 text-left">
+									<th className="w-25 border border-kumo-fill p-2 text-left">
 										Type
 									</th>
-									<th className="w-12.5 border border-border p-2 text-left">
+									<th className="w-12.5 border border-kumo-fill p-2 text-left">
 										NULL
 									</th>
-									<th className="w-31.25 border border-border p-2 text-left">
+									<th className="w-31.25 border border-kumo-fill p-2 text-left">
 										Default Value
 									</th>
-									<th className="border border-border p-2"></th>
-									<th className="w-10 border border-border p-2"></th>
+									<th className="border border-kumo-fill p-2"></th>
+									<th className="w-10 border border-kumo-fill p-2"></th>
 								</tr>
 							</thead>
 							<tbody>
@@ -219,7 +219,7 @@ export function StudioTableSchemaEditor({
 					</div>
 				</div>
 			</div>
-			<div className="grow overflow-hidden bg-surface">
+			<div className="grow overflow-hidden bg-kumo-elevated">
 				<StudioSQLEditor
 					className="h-full w-full grow"
 					readOnly
@@ -246,12 +246,12 @@ function IndexList({ indexList }: IndexListProps): JSX.Element | null {
 			<table className="w-full border-collapse">
 				<thead>
 					<tr>
-						<th className="w-10 border border-border p-2">#</th>
-						<th className="w-50 border border-border p-2 text-left">
+						<th className="w-10 border border-kumo-fill p-2">#</th>
+						<th className="w-50 border border-kumo-fill p-2 text-left">
 							Index Name
 						</th>
-						<th className="w-25 border border-border p-2 text-left">Type</th>
-						<th className="border border-border p-2 text-left"></th>
+						<th className="w-25 border border-kumo-fill p-2 text-left">Type</th>
+						<th className="border border-kumo-fill p-2 text-left"></th>
 					</tr>
 				</thead>
 
@@ -259,10 +259,10 @@ function IndexList({ indexList }: IndexListProps): JSX.Element | null {
 					{indexList.map((index, indexIdx) => {
 						return (
 							<tr key={index.name}>
-								<td className="border border-border p-2">{indexIdx + 1}</td>
-								<td className="border border-border p-2">{index.name}</td>
-								<td className="border border-border p-2">{index.type}</td>
-								<td className="border border-border p-2 font-mono">
+								<td className="border border-kumo-fill p-2">{indexIdx + 1}</td>
+								<td className="border border-kumo-fill p-2">{index.name}</td>
+								<td className="border border-kumo-fill p-2">{index.type}</td>
+								<td className="border border-kumo-fill p-2 font-mono">
 									{index.columns.join(", ")}
 								</td>
 							</tr>
diff --git a/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx b/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
index c9ad6b229c..33fa20a284 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
@@ -338,28 +338,19 @@ function pipeColumnIcon(
 		const iconStack = (
 			<div className="mr-1 flex shrink-0 items-center gap-1">
 				{hasPrimaryKey && (
-					<KeyIcon
-						weight="duotone"
-						className="size-3.5 text-green-600 dark:text-green-400"
-					/>
+					<KeyIcon weight="duotone" className="size-3.5 text-kumo-success" />
 				)}
 				{hasUniqueIndex && (
-					<KeyIcon
-						weight="duotone"
-						className="size-3.5 text-orange-600 dark:text-orange-400"
-					/>
+					<KeyIcon weight="duotone" className="size-3.5 text-kumo-warning" />
 				)}
 				{hasKeyIndex && (
-					<KeyIcon
-						weight="duotone"
-						className="size-3.5 text-blue-600 dark:text-blue-400"
-					/>
+					<KeyIcon weight="duotone" className="size-3.5 text-kumo-link" />
 				)}
 				{header.metadata.referenceTo && (
-					<FlowArrowIcon className="size-3.5 shrink-0 text-blue-600 dark:text-blue-400" />
+					<FlowArrowIcon className="size-3.5 shrink-0 text-kumo-link" />
 				)}
 				{header.metadata.columnSchema?.constraint?.generatedExpression && (
-					<SigmaIcon className="size-3.5 shrink-0 text-purple-600 dark:text-purple-400" />
+					<SigmaIcon className="size-3.5 shrink-0 text-kumo-brand" />
 				)}
 			</div>
 		);
diff --git a/packages/local-explorer-ui/src/components/studio/Tabs/CreateUpdateTable.tsx b/packages/local-explorer-ui/src/components/studio/Tabs/CreateUpdateTable.tsx
index 14fa83622c..257974fc2d 100644
--- a/packages/local-explorer-ui/src/components/studio/Tabs/CreateUpdateTable.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Tabs/CreateUpdateTable.tsx
@@ -13,7 +13,7 @@ interface StudioEditTableTabProps {
 	tableName?: string;
 }
 
-const LAYOUT_CLASSES = "overflow-auto w-full h-full bg-surface";
+const LAYOUT_CLASSES = "overflow-auto w-full h-full bg-kumo-base";
 
 export function StudioCreateUpdateTableTab({
 	schemaName,
diff --git a/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx b/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
index e3e2db6532..868891e7a2 100644
--- a/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
@@ -238,10 +238,10 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 		<SplitPane
 			defaultSize={201}
 			minSize={150}
-			resizerClassName="!bg-resizer border-transparent"
+			resizerClassName="!bg-kumo-fill border-transparent"
 			split="horizontal"
 		>
-			<div className="flex w-full flex-col bg-surface">
+			<div className="flex w-full flex-col bg-kumo-elevated">
 				<div className="grow overflow-hidden">
 					<StudioSQLEditor
 						autoCompleteSchema={autoCompelteSchema}
@@ -256,12 +256,12 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 					/>
 				</div>
 				<div className="flex shrink-0 items-center gap-2 px-4 pt-0 pb-2">
-					<div className="grow text-xs text-muted">
+					<div className="grow text-xs text-kumo-subtle">
 						Ln {lineNumber} Col {columnNumber}
 					</div>
 
 					<Button
-						className="h-8 text-xs transition hover:bg-border"
+						className="h-8 text-xs transition hover:bg-kumo-fill"
 						onClick={handleFormat}
 						variant="ghost"
 					>
@@ -270,7 +270,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 
 					<div className="flex overflow-hidden">
 						<Button
-							className="h-8 rounded-r-none pr-2! text-xs transition hover:bg-border"
+							className="h-8 rounded-r-none pr-2! text-xs transition hover:bg-kumo-fill"
 							icon={<PlayIcon weight="fill" />}
 							loading={loading}
 							onClick={onRunCurrentClicked}
@@ -283,7 +283,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 							<DropdownMenu.Trigger
 								render={
 									<Button
-										className="ml-0 h-8 rounded-l-none rounded-r-md px-2 text-xs transition hover:bg-border"
+										className="ml-0 h-8 rounded-l-none rounded-r-md px-2 text-xs transition hover:bg-kumo-fill"
 										disabled={loading}
 										variant="primary"
 									>
@@ -320,7 +320,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 				</div>
 			</div>
 
-			<div className="h-full w-full bg-surface">
+			<div className="h-full w-full bg-kumo-elevated">
 				{queryTabs && queryTabs.length > 0 && (
 					<StudioWindowTab
 						key="main-window-tab"
diff --git a/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx b/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
index 67a0030029..36a1b0d37e 100644
--- a/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
@@ -392,8 +392,8 @@ export function StudioTableExplorerTab({
 	);
 
 	return (
-		<div className="flex h-full w-full flex-col bg-surface">
-			<div className="flex shrink-0 items-center gap-2 border-b border-border p-2">
+		<div className="flex h-full w-full flex-col bg-kumo-elevated">
+			<div className="flex shrink-0 items-center gap-2 border-b border-kumo-fill p-2">
 				<Button aria-label="Refresh" onClick={onRefreshClicked} shape="square">
 					<ArrowsCounterClockwiseIcon size={14} />
 				</Button>
@@ -463,8 +463,8 @@ export function StudioTableExplorerTab({
 				{loading && (
 					<>
 						<div
-							className="absolute top-0 right-0 bottom-0 left-0 z-40 bg-black/30 backdrop-blur-md dark:bg-white/30"
-							style={{ opacity: 0.2 }}
+							className="absolute top-0 right-0 bottom-0 left-0 z-40 bg-kumo-overlay backdrop-blur-md"
+							style={{ opacity: 0.6 }}
 						/>
 						<div className="absolute top-0 right-0 bottom-0 left-0 z-40 flex items-center justify-center">
 							<SpinnerIcon className="animate-spin" size={48} />
@@ -472,14 +472,14 @@ export function StudioTableExplorerTab({
 					</>
 				)}
 			</div>
-			<div className="flex shrink-0 items-center gap-2 border-t border-border p-2">
+			<div className="flex shrink-0 items-center gap-2 border-t border-kumo-fill p-2">
 				<div className="grow">
 					{queryStats && <StudioQueryResultStats stats={queryStats} />}
 				</div>
 
 				<div>
 					<InputGroup size="base">
-						<div className="flex items-center justify-center border-r border-border px-2">
+						<div className="flex items-center justify-center border-r border-kumo-fill px-2">
 							<ListNumbersIcon size={14} />
 						</div>
 
diff --git a/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx b/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
index 7a9b5f02cd..20fb24f0c4 100644
--- a/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
@@ -129,14 +129,14 @@ export function StudioWhereFilterInput({
 
 		return (
 			<>
-				<span className="text-muted">●</span>
+				<span className="text-kumo-subtle">●</span>
 				<span>Apply</span>
 			</>
 		);
 	}, [loading, currentValue, value, parsingError]);
 
 	return (
-		<div className="flex items-center rounded border border-border bg-surface-secondary">
+		<div className="flex items-center rounded border border-kumo-fill bg-kumo-elevated">
 			<StudioSQLWhereEditor
 				className="w-full p-1"
 				columnNames={columnNameList}
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
index 75f9d90b07..d8d9a5487b 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
@@ -31,8 +31,10 @@ export function StudioWindowTabItemRenderer({
 	return (
 		<div
 			className={cn(
-				"relative flex h-10 max-w-75 min-w-42.5 cursor-pointer items-center gap-2 border-r border-b border-border px-2 text-left text-xs select-none hover:text-text",
-				selected ? "bg-surface" : "bg-surface-secondary text-muted",
+				"relative flex h-10 max-w-75 min-w-42.5 cursor-pointer items-center gap-2 border-r border-b border-kumo-fill px-2 text-left text-xs select-none hover:bg-kumo-elevated hover:text-kumo-default",
+				selected
+					? "border-b-kumo-brand bg-kumo-base text-kumo-default"
+					: "border-b-kumo-fill bg-kumo-elevated text-kumo-subtle",
 				isTemp && "italic",
 				isDirty && "not-italic"
 			)}
@@ -48,7 +50,7 @@ export function StudioWindowTabItemRenderer({
 			{onClose && (
 				<div
 					className={cn(
-						"ml-2 flex h-5 w-5 items-center justify-center rounded hover:bg-accent"
+						"ml-2 flex h-5 w-5 items-center justify-center rounded hover:bg-kumo-overlay"
 					)}
 					onClick={(e) => {
 						e.stopPropagation();
@@ -62,7 +64,7 @@ export function StudioWindowTabItemRenderer({
 					)}
 					{shouldShowDirtyIcon && (
 						<CircleIcon
-							className={"h-3 w-3 shrink-0 grow-0 text-muted"}
+							className={"h-3 w-3 shrink-0 grow-0 text-kumo-subtle"}
 							weight="fill"
 						/>
 					)}
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
index 1e78e10c18..cd1e679997 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
@@ -9,7 +9,7 @@ export function StudioWindowTabMenu({
 }: StudioWindowTabMenuProps): JSX.Element {
 	return (
 		<button
-			className="sticky right-0 flex h-10 cursor-pointer items-center gap-2 border-b border-border px-4 py-3 text-xs font-semibold tracking-wide text-muted hover:bg-border disabled:cursor-not-allowed"
+			className="sticky right-0 flex h-10 cursor-pointer items-center gap-2 border-b border-kumo-fill px-4 py-3 text-xs font-semibold tracking-wide text-kumo-subtle hover:bg-kumo-fill disabled:cursor-not-allowed"
 			onClick={onClick}
 			type="button"
 		>
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
index ef6f8a0128..6cb53fdb97 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
@@ -39,8 +39,8 @@ export function StudioWindowTab({
 	);
 
 	return (
-		<div className="flex h-full w-full flex-col">
-			<div className="relative flex shrink-0 grow-0 overflow-x-auto bg-surface-secondary">
+		<div className="flex h-full w-full flex-col bg-kumo-elevated">
+			<div className="relative flex shrink-0 grow-0 overflow-x-auto bg-kumo-elevated">
 				{tabs.map((tab, tabIndex) => {
 					// Handles tab closure. If the closed tab is the currently active one,
 					// automatically select the nearest remaining tab to preserve continuity.
@@ -94,7 +94,7 @@ export function StudioWindowTab({
 
 				{onNewClicked && <StudioWindowTabMenu onClick={onNewClicked} />}
 
-				<div className="h-10 grow border-b border-border" />
+				<div className="h-10 grow border-b border-kumo-fill" />
 			</div>
 
 			<div className="relative grow">
diff --git a/packages/local-explorer-ui/src/components/workflows/CopyButton.tsx b/packages/local-explorer-ui/src/components/workflows/CopyButton.tsx
index 4daeb57dfe..0599753c3d 100644
--- a/packages/local-explorer-ui/src/components/workflows/CopyButton.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/CopyButton.tsx
@@ -19,12 +19,12 @@ export function CopyButton({
 
 	return (
 		<button
-			className="inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-border/60"
+			className="inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-kumo-subtle transition-colors hover:bg-kumo-fill"
 			onClick={handleCopy}
 			title={label}
 		>
 			{copied ? (
-				<CheckIcon size={14} className="text-[#00c950]" />
+				<CheckIcon size={14} className="text-kumo-success" />
 			) : (
 				<CopyIcon size={14} />
 			)}
diff --git a/packages/local-explorer-ui/src/components/workflows/CreateInstanceDialog.tsx b/packages/local-explorer-ui/src/components/workflows/CreateInstanceDialog.tsx
index d1eb50dd64..20f938b794 100644
--- a/packages/local-explorer-ui/src/components/workflows/CreateInstanceDialog.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/CreateInstanceDialog.tsx
@@ -88,12 +88,12 @@ export function CreateWorkflowInstanceDialog({
 		<Dialog.Root open={open} onOpenChange={handleOpenChange}>
 			<Dialog size="lg">
 				{/* Header */}
-				<div className="border-b border-border px-6 pt-6 pb-4">
+				<div className="border-b border-kumo-fill px-6 pt-6 pb-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-					<Dialog.Title className="text-lg font-semibold text-text">
+					<Dialog.Title className="text-lg font-semibold text-kumo-default">
 						Trigger this workflow?
 					</Dialog.Title>
-					<p className="mt-1 text-sm text-text-secondary">
+					<p className="mt-1 text-sm text-kumo-subtle">
 						Manually trigger an instance of this Workflow using the payload
 						below.
 					</p>
@@ -102,21 +102,19 @@ export function CreateWorkflowInstanceDialog({
 				{/* Body */}
 				<div className="px-6 py-6">
 					{error && (
-						<div className="mb-5 rounded-lg border border-danger/20 bg-danger/8 p-3 text-sm text-danger">
+						<div className="mb-5 rounded-lg border border-kumo-danger/20 bg-kumo-danger/8 p-3 text-sm text-kumo-danger">
 							{error}
 						</div>
 					)}
 
 					{/* Instance ID */}
 					<div className="mb-5">
-						<label className="mb-2 block text-sm font-medium text-text">
+						<label className="mb-2 block text-sm font-medium text-kumo-default">
 							Instance ID{" "}
-							<span className="font-normal text-text-secondary">
-								(optional)
-							</span>
+							<span className="font-normal text-kumo-subtle">(optional)</span>
 						</label>
 						<input
-							className="w-full rounded-lg border border-border bg-bg px-3 py-2.5 text-sm text-text placeholder-text-secondary! focus:border-primary focus:shadow-focus-primary focus:outline-none"
+							className="w-full rounded-lg border border-kumo-fill bg-kumo-base px-3 py-2.5 text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 							onChange={(e) => setInstanceId(e.target.value)}
 							placeholder="Auto-generated UUID if empty"
 							type="text"
@@ -126,14 +124,14 @@ export function CreateWorkflowInstanceDialog({
 
 					{/* Params */}
 					<div>
-						<label className="mb-2 block text-sm font-medium text-text">
+						<label className="mb-2 block text-sm font-medium text-kumo-default">
 							Params
 						</label>
 						<textarea
-							className={`w-full resize-y rounded-lg border bg-bg px-3 py-2.5 font-mono text-sm text-text placeholder-text-secondary! focus:shadow-focus-primary focus:outline-none ${
+							className={`w-full resize-y rounded-lg border bg-kumo-base px-3 py-2.5 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring ${
 								paramsError
-									? "border-danger focus:border-danger"
-									: "border-border focus:border-primary"
+									? "border-kumo-danger focus:border-kumo-danger"
+									: "border-kumo-fill focus:border-kumo-brand"
 							}`}
 							onChange={(e) => {
 								setParams(e.target.value);
@@ -146,9 +144,9 @@ export function CreateWorkflowInstanceDialog({
 							value={params}
 						/>
 						{paramsError ? (
-							<p className="mt-1 text-xs text-danger">{paramsError}</p>
+							<p className="mt-1 text-xs text-kumo-danger">{paramsError}</p>
 						) : (
-							<p className="mt-1 text-xs text-text-secondary">
+							<p className="mt-1 text-xs text-kumo-subtle">
 								JSON payload passed to the workflow
 							</p>
 						)}
@@ -156,7 +154,7 @@ export function CreateWorkflowInstanceDialog({
 				</div>
 
 				{/* Footer */}
-				<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+				<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 					<Button
 						variant="secondary"
 						onClick={() => handleOpenChange(false)}
diff --git a/packages/local-explorer-ui/src/components/workflows/ScrollableCodeBlock.tsx b/packages/local-explorer-ui/src/components/workflows/ScrollableCodeBlock.tsx
index 11d4cbef8a..4788541220 100644
--- a/packages/local-explorer-ui/src/components/workflows/ScrollableCodeBlock.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/ScrollableCodeBlock.tsx
@@ -4,7 +4,7 @@ export function ScrollableCodeBlock({
 	content: string;
 }): JSX.Element {
 	return (
-		<pre className="max-h-64 overflow-y-auto px-4 py-3 font-mono text-xs break-words whitespace-pre-wrap text-text">
+		<pre className="max-h-64 overflow-y-auto px-4 py-3 font-mono text-xs wrap-break-word whitespace-pre-wrap text-kumo-default">
 			{content}
 		</pre>
 	);
diff --git a/packages/local-explorer-ui/src/components/workflows/StatusBadge.tsx b/packages/local-explorer-ui/src/components/workflows/StatusBadge.tsx
index cd76f4670e..15d37eb427 100644
--- a/packages/local-explorer-ui/src/components/workflows/StatusBadge.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/StatusBadge.tsx
@@ -3,23 +3,16 @@ import type { WorkflowsInstance } from "../../api";
 
 type WorkflowStatus = NonNullable<WorkflowsInstance["status"]>;
 
-/*
- * Color scheme matching the Cloudflare dashboard.
- * Light: soft pastel bg + dark text. Dark: vibrant saturated bg + dark text.
- * Tailwind arbitrary values with dark: variant for proper theme switching.
- */
 const statusStyles: Record<WorkflowStatus, string> = {
-	complete: "bg-[#059669] text-[#fffdfb] dark:bg-[#008236] dark:text-[#ffeee6]",
-	errored: "bg-[#fb2b36] text-[#fffdfb] dark:bg-[#c10007] dark:text-[#ffeee6]",
-	terminated:
-		"bg-[#fb2b36] text-[#fffdfb] dark:bg-[#c10007] dark:text-[#ffeee6]",
-	waiting: "bg-[#cf7ee9] text-[#fffdfb] dark:bg-[#831ca6] dark:text-[#ffeee6]",
-	paused: "bg-[#cf7ee9] text-[#fffdfb] dark:bg-[#831ca6] dark:text-[#ffeee6]",
-	running: "bg-[#2b7bfb] text-[#fffdfb] dark:bg-[#004ac2] dark:text-[#ffeee6]",
-	waitingForPause:
-		"bg-[#2b7bfb] text-[#fffdfb] dark:bg-[#004ac2] dark:text-[#ffeee6]",
-	queued: "bg-[#d9d9d9] text-[#fffdfb] dark:bg-[#b6b6b6] dark:text-[#ffeee6]",
-	unknown: "bg-[#d9d9d9] text-[#fffdfb] dark:bg-[#b6b6b6] dark:text-[#ffeee6]",
+	complete: "bg-kumo-success text-white",
+	errored: "bg-kumo-danger text-white",
+	terminated: "bg-kumo-danger text-white",
+	waiting: "bg-kumo-brand text-white",
+	paused: "bg-kumo-brand text-white",
+	running: "bg-kumo-brand text-white",
+	waitingForPause: "bg-kumo-brand text-white",
+	queued: "bg-kumo-subtle text-white",
+	unknown: "bg-kumo-subtle text-white",
 };
 
 const statusLabels: Record<WorkflowStatus, string> = {
diff --git a/packages/local-explorer-ui/src/components/workflows/StatusIcon.tsx b/packages/local-explorer-ui/src/components/workflows/StatusIcon.tsx
index df965004cb..9b11d7e72e 100644
--- a/packages/local-explorer-ui/src/components/workflows/StatusIcon.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/StatusIcon.tsx
@@ -13,7 +13,7 @@ export function StatusIcon({ status }: { status: string }): JSX.Element {
 		case "complete":
 			return (
 				<Tooltip content="Complete">
-					<CheckCircleIcon size={20} weight="fill" className="text-[#2b7bfb]" />
+					<CheckCircleIcon size={20} weight="fill" className="text-kumo-link" />
 				</Tooltip>
 			);
 		case "errored":
@@ -22,21 +22,21 @@ export function StatusIcon({ status }: { status: string }): JSX.Element {
 					<WarningCircleIcon
 						size={20}
 						weight="fill"
-						className="text-[#fb2b36]"
+						className="text-kumo-danger"
 					/>
 				</Tooltip>
 			);
 		case "terminated":
 			return (
 				<Tooltip content="Terminated">
-					<StopIcon size={20} weight="fill" className="text-text-secondary" />
+					<StopIcon size={20} weight="fill" className="text-kumo-subtle" />
 				</Tooltip>
 			);
 		case "paused":
 		case "waitingForPause":
 			return (
 				<Tooltip content="Paused">
-					<PauseIcon size={20} weight="fill" className="text-text-secondary" />
+					<PauseIcon size={20} weight="fill" className="text-kumo-subtle" />
 				</Tooltip>
 			);
 		case "running":
@@ -48,11 +48,7 @@ export function StatusIcon({ status }: { status: string }): JSX.Element {
 		case "waiting":
 			return (
 				<Tooltip content="Waiting">
-					<SpinnerIcon
-						size={20}
-						weight="bold"
-						className="text-text-secondary"
-					/>
+					<SpinnerIcon size={20} weight="bold" className="text-kumo-subtle" />
 				</Tooltip>
 			);
 		default:
@@ -61,7 +57,7 @@ export function StatusIcon({ status }: { status: string }): JSX.Element {
 					<CircleNotchIcon
 						size={20}
 						weight="bold"
-						className="text-text-secondary"
+						className="text-kumo-subtle"
 					/>
 				</Tooltip>
 			);
diff --git a/packages/local-explorer-ui/src/components/workflows/StepRow.tsx b/packages/local-explorer-ui/src/components/workflows/StepRow.tsx
index 323b83693f..49528fc820 100644
--- a/packages/local-explorer-ui/src/components/workflows/StepRow.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/StepRow.tsx
@@ -21,13 +21,13 @@ function StepStatusIcon({
 	if (success === false || hasError) {
 		if (subtle) {
 			return (
-				<div className="flex size-5 items-center justify-center rounded bg-text-secondary/30">
-					<span className="text-xs font-bold text-text">!</span>
+				<div className="flex size-5 items-center justify-center rounded bg-kumo-fill">
+					<span className="text-xs font-bold text-kumo-default">!</span>
 				</div>
 			);
 		}
 		return (
-			<div className="flex size-5 items-center justify-center rounded bg-[#fb2b36]">
+			<div className="flex size-5 items-center justify-center rounded bg-kumo-danger">
 				<span className="text-xs font-bold text-white">!</span>
 			</div>
 		);
@@ -35,13 +35,13 @@ function StepStatusIcon({
 	if (success === true || finished === true) {
 		if (subtle) {
 			return (
-				<div className="flex size-5 items-center justify-center rounded bg-text-secondary/30">
+				<div className="flex size-5 items-center justify-center rounded bg-kumo-fill">
 					<CheckIcon size={12} weight="bold" className="text-white" />
 				</div>
 			);
 		}
 		return (
-			<div className="flex size-5 items-center justify-center rounded bg-[#059669]">
+			<div className="bg-kumo-success flex size-5 items-center justify-center rounded">
 				<CheckIcon size={12} weight="bold" className="text-white" />
 			</div>
 		);
@@ -54,10 +54,9 @@ function StepStatusIcon({
 }
 
 const TYPE_BADGE_STYLES: Record<string, string> = {
-	step: "bg-bg-tertiary text-text-secondary",
-	sleep: "bg-[#f5f5f5] text-[#525252] dark:bg-[#262626] dark:text-[#a3a3a3]",
-	waitForEvent:
-		"bg-[#f5f3ff] text-[#7c3aed] dark:bg-[#2e1065] dark:text-[#a78bfa]",
+	step: "bg-kumo-tint text-kumo-subtle",
+	sleep: "bg-kumo-overlay text-kumo-subtle",
+	waitForEvent: "bg-kumo-brand/10 text-kumo-brand",
 };
 
 export function StepRow({ step }: { step: StepData }): JSX.Element {
@@ -69,10 +68,10 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 			(step.error || step.output !== undefined || step.finished));
 
 	return (
-		<div className="border-b border-border p-1 last:border-b-0">
+		<div className="border-b border-kumo-fill p-1 last:border-b-0">
 			{/* Collapsed row */}
 			<div
-				className={`grid h-10 grid-cols-[20px_1fr_160px_160px_80px_24px] items-center gap-3 rounded-lg px-2 transition-colors ${hasDetails ? "cursor-pointer hover:bg-border/40" : ""}`}
+				className={`grid h-10 grid-cols-[20px_1fr_160px_160px_80px_24px] items-center gap-3 rounded-lg px-2 transition-colors ${hasDetails ? "cursor-pointer hover:bg-kumo-fill" : ""}`}
 				onClick={hasDetails ? () => setExpanded(!expanded) : undefined}
 			>
 				<StepStatusIcon
@@ -89,14 +88,14 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 							{step.type === "waitForEvent" ? "wait for event" : step.type}
 						</span>
 					)}
-					<span className="truncate text-sm text-text">
+					<span className="truncate text-sm text-kumo-default">
 						{step.name ?? "Unknown step"}
 					</span>
 				</div>
 
 				<Timestamp value={step.start} />
 				<Timestamp value={step.end} />
-				<span className="text-sm text-text-secondary">
+				<span className="text-sm text-kumo-subtle">
 					{formatDuration(step.start, step.end)}
 				</span>
 
@@ -104,7 +103,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 					{hasDetails ? (
 						<PlusIcon
 							size={14}
-							className={`text-text-secondary transition-transform ${expanded ? "rotate-45" : ""}`}
+							className={`text-kumo-subtle transition-transform ${expanded ? "rotate-45" : ""}`}
 						/>
 					) : (
 						<div className="w-6" />
@@ -115,7 +114,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 			{/* Expanded detail panel */}
 			{expanded && hasDetails && (
 				<div className="-mx-1 -mb-1">
-					<div className="mt-1 h-2 rounded-t-lg border-t border-border" />
+					<div className="mt-1 h-2 rounded-t-lg border-t border-kumo-fill" />
 					<div className="px-4 pt-3 pb-4">
 						{step.type === "step" && <StepDoDetails step={step} />}
 						{step.type === "waitForEvent" && (
@@ -137,8 +136,8 @@ function StepCodeCard({
 }): JSX.Element {
 	return (
 		<div>
-			<h5 className="mb-2 text-sm font-medium text-text">{label}</h5>
-			<div className="relative overflow-hidden rounded-lg border border-border bg-bg">
+			<h5 className="mb-2 text-sm font-medium text-kumo-default">{label}</h5>
+			<div className="relative overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base">
 				<ScrollableCodeBlock content={content} />
 				<div className="absolute top-1.5 right-1.5">
 					<CopyButton text={content} label={`Copy ${label.toLowerCase()}`} />
@@ -180,8 +179,10 @@ function StepDoDetails({ step }: { step: StepData }): JSX.Element {
 			{/* Attempts */}
 			{step.attempts && step.attempts.length > 0 && (
 				<div>
-					<hr className="mb-4 border-dashed border-border" />
-					<h5 className="mb-2 text-sm font-medium text-text">Attempts</h5>
+					<hr className="mb-4 border-dashed border-kumo-fill" />
+					<h5 className="mb-2 text-sm font-medium text-kumo-default">
+						Attempts
+					</h5>
 					<div>
 						{[...step.attempts].reverse().map((attempt, i, reversed) => {
 							const attemptNum = reversed.length - i;
@@ -199,10 +200,10 @@ function StepDoDetails({ step }: { step: StepData }): JSX.Element {
 
 							return (
 								<div key={i}>
-									<div className="rounded-md bg-bg py-2 pr-3 text-sm">
+									<div className="rounded-md bg-kumo-base py-2 pr-3 text-sm">
 										<div className="flex items-start gap-3">
 											<div className="flex shrink-0 items-center gap-3 pt-0.5">
-												<span className="font-mono text-text-secondary">
+												<span className="font-mono text-kumo-subtle">
 													#{attemptNum}
 												</span>
 												<StepStatusIcon success={attempt.success} subtle />
@@ -210,21 +211,21 @@ function StepDoDetails({ step }: { step: StepData }): JSX.Element {
 											<div className="min-w-0 flex-1">
 												<div className="flex items-center gap-2">
 													{attempt.error ? (
-														<span className="font-medium text-text">
+														<span className="font-medium text-kumo-default">
 															{attempt.error.name}
 														</span>
 													) : attempt.success ? (
-														<span className="text-text-secondary">Success</span>
+														<span className="text-kumo-subtle">Success</span>
 													) : (
-														<span className="text-text-secondary">Running</span>
+														<span className="text-kumo-subtle">Running</span>
 													)}
-													<span className="flex-1 border-t border-dashed border-border" />
-													<span className="shrink-0 text-text-secondary">
+													<span className="flex-1 border-t border-dashed border-kumo-fill" />
+													<span className="shrink-0 text-kumo-subtle">
 														{formatDuration(attempt.start, attempt.end)}
 													</span>
 												</div>
 												{attempt.error?.message && (
-													<p className="mt-1 text-xs text-text-secondary">
+													<p className="mt-1 text-xs text-kumo-subtle">
 														{attempt.error.message}
 													</p>
 												)}
@@ -232,11 +233,11 @@ function StepDoDetails({ step }: { step: StepData }): JSX.Element {
 										</div>
 									</div>
 									{!isLast && delayMs !== null && delayMs > 0 && (
-										<div className="flex items-center py-1 pl-[28px]">
+										<div className="flex items-center py-1 pl-7">
 											<div className="flex h-10 w-5 items-center justify-center">
-												<div className="h-full border-l border-dashed border-border" />
+												<div className="h-full border-l border-dashed border-kumo-fill" />
 											</div>
-											<span className="ml-2 text-sm text-text-secondary">
+											<span className="ml-2 text-sm text-kumo-subtle">
 												{formatDuration(nextDisplayed?.end, attempt.start)}
 											</span>
 										</div>
diff --git a/packages/local-explorer-ui/src/components/workflows/Timestamp.tsx b/packages/local-explorer-ui/src/components/workflows/Timestamp.tsx
index 5b4672d7fa..c255e58d9a 100644
--- a/packages/local-explorer-ui/src/components/workflows/Timestamp.tsx
+++ b/packages/local-explorer-ui/src/components/workflows/Timestamp.tsx
@@ -36,7 +36,7 @@ export function Timestamp({
 	value: string | undefined | null;
 }): JSX.Element {
 	if (!value) {
-		return <span className="text-sm text-text-secondary">—</span>;
+		return <span className="text-sm text-kumo-subtle">—</span>;
 	}
 
 	const short = formatShort(value);
@@ -48,11 +48,11 @@ export function Timestamp({
 			content={
 				<div className="space-y-1 text-xs">
 					<div>{full}</div>
-					<div className="text-text-secondary">{relative}</div>
+					<div className="text-kumo-subtle">{relative}</div>
 				</div>
 			}
 		>
-			<span className="text-sm whitespace-nowrap text-text-secondary">
+			<span className="text-sm whitespace-nowrap text-kumo-subtle">
 				{short}
 			</span>
 		</Tooltip>
diff --git a/packages/local-explorer-ui/src/main.tsx b/packages/local-explorer-ui/src/main.tsx
index 709762b5b1..9dfb05bf75 100644
--- a/packages/local-explorer-ui/src/main.tsx
+++ b/packages/local-explorer-ui/src/main.tsx
@@ -4,6 +4,17 @@ import { createRoot } from "react-dom/client";
 import "./styles/tailwind.css";
 import { routeTree } from "./routeTree.gen";
 
+const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+function syncColorModeWithOS(): void {
+	document.documentElement.dataset.mode = darkModeQuery.matches
+		? "dark"
+		: "light";
+}
+
+syncColorModeWithOS();
+darkModeQuery.addEventListener("change", syncColorModeWithOS);
+
 // eslint-disable-next-line turbo/no-undeclared-env-vars -- replaced at build time
 const router = createRouter({ routeTree, basepath: import.meta.env.BASE_URL });
 
diff --git a/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx b/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
index ff667df426..2148891509 100644
--- a/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
+++ b/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
@@ -169,9 +169,7 @@ function DatabaseView(): JSX.Element {
 						{databaseName && databaseName !== params.databaseId ? (
 							<>
 								{databaseName}
-								<span className="text-text-secondary">
-									({params.databaseId})
-								</span>
+								<span className="text-kumo-subtle">({params.databaseId})</span>
 							</>
 						) : (
 							params.databaseId
@@ -240,7 +238,7 @@ function DatabaseView(): JSX.Element {
 				/>
 			)}
 
-			<div className="flex-1 overflow-hidden">
+			<div className="flex-1 overflow-hidden bg-kumo-elevated">
 				<Studio
 					driver={driver}
 					initialTable={searchParams.table}
diff --git a/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx b/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
index 7f382890c1..9bc2cd33b0 100644
--- a/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
+++ b/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
@@ -185,7 +185,7 @@ function ObjectView(): JSX.Element {
 					>
 						{params.className}
 						{namespaceId !== params.className && (
-							<span className="text-text-secondary">({namespaceId})</span>
+							<span className="text-kumo-subtle">({namespaceId})</span>
 						)}
 					</Link>,
 					<span
diff --git a/packages/local-explorer-ui/src/routes/do/$className/index.tsx b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
index ec3ce1b077..a68ca3927e 100644
--- a/packages/local-explorer-ui/src/routes/do/$className/index.tsx
+++ b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
@@ -124,7 +124,7 @@ function NamespaceView() {
 					<span className="flex items-center gap-1.5" key="class-name">
 						{params.className}
 						{namespaceId !== params.className && (
-							<span className="text-text-secondary">({namespaceId})</span>
+							<span className="text-kumo-subtle">({namespaceId})</span>
 						)}
 					</span>,
 				]}
@@ -133,15 +133,15 @@ function NamespaceView() {
 
 			<div className="px-6 py-6">
 				{error && (
-					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
+					<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-kumo-danger">
 						{error}
 					</div>
 				)}
 
 				{loading ? (
-					<div className="p-12 text-center text-text-secondary">Loading...</div>
+					<div className="p-12 text-center text-kumo-subtle">Loading...</div>
 				) : objects.length === 0 ? (
-					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
+					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-kumo-subtle">
 						<h2 className="text-2xl font-medium">
 							No Durable Objects with stored data
 						</h2>
@@ -151,7 +151,7 @@ function NamespaceView() {
 					</div>
 				) : (
 					<>
-						<div className="overflow-hidden rounded-lg border border-border">
+						<div className="overflow-hidden rounded-lg border border-kumo-fill">
 							<Table>
 								<Table.Header>
 									<Table.Row>
@@ -167,7 +167,7 @@ function NamespaceView() {
 											</Table.Cell>
 											<Table.Cell className="text-right">
 												<Link
-													className="inline-flex h-6.5 items-center gap-1 rounded-md px-2 text-xs hover:bg-border/50"
+													className="inline-flex h-6.5 items-center gap-1 rounded-md px-2 text-xs hover:bg-kumo-fill"
 													params={{
 														className: params.className,
 														objectId: obj.id as string,
diff --git a/packages/local-explorer-ui/src/routes/index.tsx b/packages/local-explorer-ui/src/routes/index.tsx
index 082858bd76..fdabb0ed29 100644
--- a/packages/local-explorer-ui/src/routes/index.tsx
+++ b/packages/local-explorer-ui/src/routes/index.tsx
@@ -10,10 +10,10 @@ function IndexPage() {
 		<div className="flex h-full flex-col items-center justify-center space-y-2 p-12 text-center">
 			<CloudflareLogo variant="glyph" className="h-24 w-24" />
 
-			<h2 className="text-3xl font-bold text-text">
+			<h2 className="text-3xl font-bold text-kumo-default">
 				Welcome to Local Explorer
 			</h2>
-			<p className="text-sm font-light text-text-secondary">
+			<p className="text-sm font-light text-kumo-subtle">
 				Select a resource from the sidebar to view & manage it.
 			</p>
 		</div>
diff --git a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
index 3873ce43c0..683788ffeb 100644
--- a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
+++ b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
@@ -372,7 +372,7 @@ function NamespaceView() {
 						{namespaceTitle && namespaceTitle !== namespaceId ? (
 							<>
 								{namespaceTitle}
-								<span className="text-text-secondary">({namespaceId})</span>
+								<span className="text-kumo-subtle">({namespaceId})</span>
 							</>
 						) : (
 							namespaceId
@@ -383,7 +383,7 @@ function NamespaceView() {
 
 			<div className="px-6 py-6">
 				{error && (
-					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
+					<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-kumo-danger">
 						{error}
 					</div>
 				)}
@@ -394,14 +394,14 @@ function NamespaceView() {
 					disabled={loading}
 				/>
 
-				<hr className="my-4 border-border" />
+				<hr className="my-4 border-kumo-fill" />
 
 				<AddKVForm onAdd={handleAdd} clearSignal={clearAddForm} />
 
 				{loading ? (
-					<div className="p-12 text-center text-text-secondary">Loading...</div>
+					<div className="p-12 text-center text-kumo-subtle">Loading...</div>
 				) : entries.length === 0 ? (
-					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
+					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-kumo-subtle">
 						{prefix ? (
 							<p className="text-sm font-light">{`No keys found matching prefix "${prefix}".`}</p>
 						) : (
@@ -449,7 +449,7 @@ function NamespaceView() {
 							Delete key?
 						</Dialog.Title>
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Description className="mb-2 text-text-secondary">
+						<Dialog.Description className="mb-2 text-kumo-subtle">
 							Are you sure you want to delete &ldquo;{deleteTarget}&rdquo;? This
 							cannot be undone.
 						</Dialog.Description>
@@ -483,7 +483,7 @@ function NamespaceView() {
 							Overwrite key?
 						</Dialog.Title>
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Description className="mb-2 text-text-secondary">
+						<Dialog.Description className="mb-2 text-kumo-subtle">
 							Key &ldquo;{overwriteConfirm?.key}&rdquo; already exists. Do you
 							want to overwrite its value?
 						</Dialog.Description>
diff --git a/packages/local-explorer-ui/src/routes/r2/$bucketName/index.tsx b/packages/local-explorer-ui/src/routes/r2/$bucketName/index.tsx
index b9a95e9711..06c0578020 100644
--- a/packages/local-explorer-ui/src/routes/r2/$bucketName/index.tsx
+++ b/packages/local-explorer-ui/src/routes/r2/$bucketName/index.tsx
@@ -302,7 +302,7 @@ function BucketView(): JSX.Element {
 		: [];
 	const breadcrumbItems = [
 		<Link
-			className="text-text no-underline hover:text-primary"
+			className="text-kumo-default no-underline hover:text-kumo-link"
 			key="bucket"
 			params={{ bucketName: params.bucketName }}
 			search={{}}
@@ -315,7 +315,7 @@ function BucketView(): JSX.Element {
 
 			return (
 				<Link
-					className="text-text no-underline hover:text-primary"
+					className="text-kumo-default no-underline hover:text-kumo-link"
 					key={segmentPrefix}
 					params={{ bucketName: params.bucketName }}
 					search={{ prefix: segmentPrefix }}
@@ -428,7 +428,7 @@ function BucketView(): JSX.Element {
 						</Dialog.Title>
 
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Description className="mb-2 text-text-secondary">
+						<Dialog.Description className="mb-2 text-kumo-subtle">
 							{deleteTargets.length === 1 ? (
 								<>
 									Are you sure you want to delete &ldquo;{deleteTargets[0]}
@@ -479,24 +479,24 @@ function BucketView(): JSX.Element {
 						</Dialog.Title>
 
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Description className="mb-4 text-text-secondary">
+						<Dialog.Description className="mb-4 text-kumo-subtle">
 							Enter a name for the new directory.
 						</Dialog.Description>
 
 						<div className="mb-4">
-							<label className="mb-1 block text-sm font-medium text-text">
+							<label className="mb-1 block text-sm font-medium text-kumo-default">
 								Directory name
 							</label>
 							<input
 								type="text"
-								className="w-full rounded-md border border-border bg-bg px-3 py-2 text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none"
+								className="w-full rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 								value={newDirectoryName}
 								onChange={(e) => setNewDirectoryName(e.target.value)}
 								placeholder="my-directory"
 								autoFocus
 							/>
 							{search.prefix && (
-								<p className="mt-1 text-xs text-text-secondary">
+								<p className="mt-1 text-xs text-kumo-subtle">
 									Will be created at: {search.prefix}
 									{newDirectoryName || "..."}/
 								</p>
diff --git a/packages/local-explorer-ui/src/routes/r2/$bucketName/object.$.tsx b/packages/local-explorer-ui/src/routes/r2/$bucketName/object.$.tsx
index 35866d7cf5..6c82554ab3 100644
--- a/packages/local-explorer-ui/src/routes/r2/$bucketName/object.$.tsx
+++ b/packages/local-explorer-ui/src/routes/r2/$bucketName/object.$.tsx
@@ -55,25 +55,27 @@ function ObjectDetailsCard({ object }: ObjectDetailsCardProps): JSX.Element {
 		: [formattedDate, ""];
 
 	return (
-		<div className="rounded-lg border border-border bg-bg p-6">
-			<h3 className="mb-4 text-base font-semibold text-text">Object Details</h3>
+		<div className="rounded-lg border border-kumo-fill bg-kumo-base p-6">
+			<h3 className="mb-4 text-base font-semibold text-kumo-default">
+				Object Details
+			</h3>
 			<dl className="grid grid-cols-3 gap-x-8 gap-y-2 text-sm">
 				<div>
-					<dt className="text-text-secondary">Date Created</dt>
+					<dt className="text-kumo-subtle">Date Created</dt>
 					<dd className="mt-1">
-						<span className="text-text">{datePart}</span>
+						<span className="text-kumo-default">{datePart}</span>
 						{timePart && (
-							<span className="ml-1 text-text-secondary">{timePart}</span>
+							<span className="ml-1 text-kumo-subtle">{timePart}</span>
 						)}
 					</dd>
 				</div>
 				<div>
-					<dt className="text-text-secondary">Type</dt>
-					<dd className="mt-1 text-text">{contentType}</dd>
+					<dt className="text-kumo-subtle">Type</dt>
+					<dd className="mt-1 text-kumo-default">{contentType}</dd>
 				</div>
 				<div>
-					<dt className="text-text-secondary">Size</dt>
-					<dd className="mt-1 text-text">{formatSize(object.size)}</dd>
+					<dt className="text-kumo-subtle">Size</dt>
+					<dd className="mt-1 text-kumo-default">{formatSize(object.size)}</dd>
 				</div>
 			</dl>
 		</div>
@@ -90,19 +92,19 @@ function CustomMetadataCard({
 	const entries = metadata ? Object.entries(metadata) : [];
 
 	return (
-		<div className="rounded-lg border border-border bg-bg p-6">
-			<h3 className="mb-4 text-base font-semibold text-text">
+		<div className="rounded-lg border border-kumo-fill bg-kumo-base p-6">
+			<h3 className="mb-4 text-base font-semibold text-kumo-default">
 				Custom Metadata
 			</h3>
 
 			{entries.length === 0 ? (
-				<p className="text-sm text-text-secondary">No custom metadata set</p>
+				<p className="text-sm text-kumo-subtle">No custom metadata set</p>
 			) : (
 				<dl className="space-y-2 text-sm">
 					{entries.map(([key, value]) => (
 						<div key={key} className="flex gap-4">
-							<dt className="min-w-30 font-mono text-text-secondary">{key}</dt>
-							<dd className="font-mono text-text">{value}</dd>
+							<dt className="min-w-30 font-mono text-kumo-subtle">{key}</dt>
+							<dd className="font-mono text-kumo-default">{value}</dd>
 						</div>
 					))}
 				</dl>
@@ -163,7 +165,7 @@ function ObjectDetailView(): JSX.Element {
 	const fileName = pathSegments.pop() || search.objectKey;
 	const breadcrumbItems = [
 		<Link
-			className="text-text no-underline hover:text-primary"
+			className="text-kumo-default no-underline hover:text-kumo-link"
 			key="bucket"
 			params={{ bucketName: params.bucketName }}
 			search={{}}
@@ -175,7 +177,7 @@ function ObjectDetailView(): JSX.Element {
 			const segmentPrefix = pathSegments.slice(0, index + 1).join("/") + "/";
 			return (
 				<Link
-					className="text-text no-underline hover:text-primary"
+					className="text-kumo-default no-underline hover:text-kumo-link"
 					key={segmentPrefix}
 					params={{ bucketName: params.bucketName }}
 					search={{ prefix: segmentPrefix }}
@@ -194,7 +196,7 @@ function ObjectDetailView(): JSX.Element {
 
 			<div className="px-6 py-6">
 				{error && (
-					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
+					<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-kumo-danger">
 						{error}
 					</div>
 				)}
@@ -202,7 +204,7 @@ function ObjectDetailView(): JSX.Element {
 				<div className="mb-6 flex items-center justify-between">
 					<div className="flex min-w-0 items-center gap-2">
 						<h1
-							className="truncate text-base text-text"
+							className="truncate text-base text-kumo-default"
 							title={search.objectKey}
 						>
 							{search.objectKey}
@@ -245,7 +247,7 @@ function ObjectDetailView(): JSX.Element {
 						</Dialog.Title>
 
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Description className="mb-2 text-text-secondary">
+						<Dialog.Description className="mb-2 text-kumo-subtle">
 							Are you sure you want to delete &ldquo;{search.objectKey}
 							&rdquo;? This cannot be undone.
 						</Dialog.Description>
diff --git a/packages/local-explorer-ui/src/routes/workflows/$workflowName/$instanceId.tsx b/packages/local-explorer-ui/src/routes/workflows/$workflowName/$instanceId.tsx
index bcd38577e6..e2b89c3fed 100644
--- a/packages/local-explorer-ui/src/routes/workflows/$workflowName/$instanceId.tsx
+++ b/packages/local-explorer-ui/src/routes/workflows/$workflowName/$instanceId.tsx
@@ -98,18 +98,20 @@ const StatsStrip = memo(function StatsStrip({
 	end?: string;
 }) {
 	return (
-		<div className="grid grid-cols-3 overflow-hidden rounded-lg border border-border bg-bg">
+		<div className="grid grid-cols-3 overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base">
 			<div className="flex items-center justify-between px-5 py-2">
-				<span className="text-base text-text-secondary">Status</span>
+				<span className="text-base text-kumo-subtle">Status</span>
 				<WorkflowStatusBadge status={status} />
 			</div>
-			<div className="flex items-center justify-between border-l border-border px-5 py-2">
-				<span className="text-base text-text-secondary">Steps Completed</span>
-				<span className="text-base font-medium text-text">{stepCount}</span>
+			<div className="flex items-center justify-between border-l border-kumo-fill px-5 py-2">
+				<span className="text-base text-kumo-subtle">Steps Completed</span>
+				<span className="text-base font-medium text-kumo-default">
+					{stepCount}
+				</span>
 			</div>
-			<div className="flex items-center justify-between border-l border-border px-5 py-2">
-				<span className="text-base text-text-secondary">Duration</span>
-				<span className="text-base font-medium text-text">
+			<div className="flex items-center justify-between border-l border-kumo-fill px-5 py-2">
+				<span className="text-base text-kumo-subtle">Duration</span>
+				<span className="text-base font-medium text-kumo-default">
 					{formatDuration(start, end)}
 				</span>
 			</div>
@@ -125,20 +127,22 @@ const ParamsOutput = memo(function ParamsOutput({
 	output: unknown;
 }) {
 	return (
-		<div className="overflow-hidden rounded-xl border border-border bg-bg-tertiary">
-			<div className="grid grid-cols-2 divide-x divide-border">
+		<div className="overflow-hidden rounded-xl border border-kumo-fill bg-kumo-tint">
+			<div className="grid grid-cols-2 divide-x divide-kumo-fill">
 				{/* Input params header */}
 				<div className="px-4 py-2.5">
-					<span className="text-sm font-medium text-text">Input params</span>
+					<span className="text-sm font-medium text-kumo-default">
+						Input params
+					</span>
 				</div>
 				{/* Output header */}
 				<div className="px-4 py-2.5">
-					<span className="text-sm font-medium text-text">Output</span>
+					<span className="text-sm font-medium text-kumo-default">Output</span>
 				</div>
 			</div>
 			{/* Content with rounded top corners to create the LayerCard effect */}
-			<div className="rounded-t-lg border-t border-border bg-bg">
-				<div className="grid grid-cols-2 divide-x divide-border">
+			<div className="rounded-t-lg border-t border-kumo-fill bg-kumo-base">
+				<div className="grid grid-cols-2 divide-x divide-kumo-fill">
 					<div className="relative">
 						<ScrollableCodeBlock content={formatJson(params)} />
 						<div className="absolute top-1.5 right-1.5">
@@ -164,11 +168,11 @@ const ErrorCard = memo(function ErrorCard({
 }) {
 	return (
 		<LayerCard>
-			<LayerCard.Secondary className="bg-bg-tertiary !px-4 !py-2.5">
+			<LayerCard.Secondary className="bg-kumo-tint px-4! py-2.5!">
 				<Text bold>{error.name ?? "Error"}</Text>
 			</LayerCard.Secondary>
-			<LayerCard.Primary className="relative !p-0">
-				<pre className="max-h-64 overflow-y-auto px-4 py-3 font-mono text-sm break-words whitespace-pre-wrap text-text-secondary">
+			<LayerCard.Primary className="relative p-0!">
+				<pre className="max-h-64 overflow-y-auto px-4 py-3 font-mono text-sm wrap-break-word whitespace-pre-wrap text-kumo-subtle">
 					{error.message ?? "Unknown error"}
 				</pre>
 				<div className="absolute top-1.5 right-1.5">
@@ -217,7 +221,9 @@ const StepHistory = memo(function StepHistory({
 	return (
 		<div>
 			<div className="mb-3">
-				<h4 className="text-lg font-semibold text-text">Step History</h4>
+				<h4 className="text-lg font-semibold text-kumo-default">
+					Step History
+				</h4>
 			</div>
 
 			{/* Search + Filter controls */}
@@ -226,10 +232,10 @@ const StepHistory = memo(function StepHistory({
 					<div className="relative flex-1">
 						<MagnifyingGlassIcon
 							size={14}
-							className="absolute top-1/2 left-3 -translate-y-1/2 text-text-secondary"
+							className="absolute top-1/2 left-3 -translate-y-1/2 text-kumo-subtle"
 						/>
 						<input
-							className="h-9 w-full rounded-lg border border-border bg-bg pr-3 pl-9 text-sm text-text placeholder-text-secondary focus:border-primary focus:shadow-focus-primary focus:outline-none"
+							className="h-9 w-full rounded-lg border border-kumo-fill bg-kumo-base pr-3 pl-9 text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 							onChange={(e) => setSearch(e.target.value)}
 							placeholder="Search steps..."
 							type="text"
@@ -239,27 +245,27 @@ const StepHistory = memo(function StepHistory({
 					<DropdownMenu>
 						<DropdownMenu.Trigger
 							render={
-								<button className="inline-flex h-9 w-44 cursor-pointer items-center justify-between rounded-lg border border-border bg-bg px-3 text-sm text-text transition-colors hover:bg-border/60">
+								<button className="inline-flex h-9 w-44 cursor-pointer items-center justify-between rounded-lg border border-kumo-fill bg-kumo-base px-3 text-sm text-kumo-default transition-colors hover:bg-kumo-fill">
 									<span className="flex items-center gap-2">
-										<ActiveIcon size={14} className="text-text-secondary" />
+										<ActiveIcon size={14} className="text-kumo-subtle" />
 										{activeFilter.label}
 									</span>
-									<CaretDownIcon size={14} className="text-text-secondary" />
+									<CaretDownIcon size={14} className="text-kumo-subtle" />
 								</button>
 							}
 						/>
 						<DropdownMenu.Content
 							align="end"
-							className="w-44 bg-bg"
+							className="w-44 bg-kumo-base"
 							side="bottom"
 						>
 							{STEP_TYPE_FILTERS.map(({ value, label, icon: Icon }) => (
 								<DropdownMenu.Item
-									className="flex cursor-pointer items-center gap-2 rounded-md transition-colors hover:bg-border/60"
+									className="flex cursor-pointer items-center gap-2 rounded-md transition-colors hover:bg-kumo-fill"
 									key={value}
 									onClick={() => setTypeFilter(value)}
 								>
-									<Icon size={14} className="text-text-secondary" />
+									<Icon size={14} className="text-kumo-subtle" />
 									{label}
 								</DropdownMenu.Item>
 							))}
@@ -268,13 +274,13 @@ const StepHistory = memo(function StepHistory({
 				</div>
 			)}
 
-			<div className="overflow-hidden rounded-lg border border-border bg-bg">
+			<div className="overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base">
 				{stepList.length === 0 ? (
-					<div className="px-4 py-8 text-center text-sm text-text-secondary">
+					<div className="px-4 py-8 text-center text-sm text-kumo-subtle">
 						No steps recorded yet
 					</div>
 				) : filtered.length === 0 ? (
-					<div className="px-4 py-8 text-center text-sm text-text-secondary">
+					<div className="px-4 py-8 text-center text-sm text-kumo-subtle">
 						No steps match your search
 					</div>
 				) : (
@@ -403,12 +409,12 @@ function InstanceDetailView() {
 					<div>
 						<header className="flex items-center justify-between pb-6">
 							<div className="flex items-center gap-3">
-								<h1 className="text-2xl font-semibold text-text">
+								<h1 className="text-2xl font-semibold text-kumo-default">
 									{params.workflowName}
 								</h1>
 								<Tooltip content={copied ? "Copied!" : "Copy instance ID"}>
 									<button
-										className={`cursor-pointer font-mono text-2xl transition-colors ${copied ? "text-text" : "text-text-secondary hover:text-text"}`}
+										className={`cursor-pointer font-mono text-2xl transition-colors ${copied ? "text-kumo-default" : "text-kumo-subtle hover:text-kumo-default"}`}
 										onClick={() => {
 											void navigator.clipboard.writeText(instanceId);
 											setCopied(true);
@@ -430,8 +436,8 @@ function InstanceDetailView() {
 											key={action}
 											className={`inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border px-3 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
 												isTerminate
-													? "border-border bg-bg text-danger hover:bg-danger/10"
-													: "border-border bg-bg text-text hover:bg-border/60"
+													? "border-kumo-fill bg-kumo-base text-kumo-danger hover:bg-kumo-danger/10"
+													: "border-kumo-fill bg-kumo-base text-kumo-default hover:bg-kumo-fill"
 											}`}
 											disabled={actionInProgress !== null}
 											onClick={() => void handleAction(action)}
@@ -451,7 +457,7 @@ function InstanceDetailView() {
 									status !== "errored" &&
 									status !== "terminated" && (
 										<button
-											className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-border bg-bg text-text-secondary transition-colors hover:bg-border/60 disabled:cursor-not-allowed disabled:opacity-40 dark:text-text"
+											className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-kumo-fill bg-kumo-base text-kumo-default transition-colors hover:bg-kumo-fill disabled:cursor-not-allowed disabled:opacity-40"
 											disabled={actionInProgress !== null}
 											onClick={() => setSendEventOpen(true)}
 											title="Send Event"
@@ -460,7 +466,7 @@ function InstanceDetailView() {
 										</button>
 									)}
 								<button
-									className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-border bg-bg text-danger transition-colors hover:bg-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
+									className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-kumo-fill bg-kumo-base text-kumo-danger transition-colors hover:bg-kumo-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
 									disabled={actionInProgress !== null}
 									onClick={() => setDeleteDialogOpen(true)}
 									title="Delete"
@@ -473,7 +479,7 @@ function InstanceDetailView() {
 				</div>
 				{/* Stats strip overlapping the divider line */}
 				<div className="relative">
-					<hr className="absolute top-1/2 w-full border-border" />
+					<hr className="absolute top-1/2 w-full border-kumo-fill" />
 					<div className="relative px-32">
 						<StatsStrip
 							status={status}
@@ -486,28 +492,28 @@ function InstanceDetailView() {
 
 				{/* Delete confirmation dialog */}
 				<Dialog.Root open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-					<Dialog size="lg" className="w-[32rem]">
-						<div className="border-b border-border px-6 py-4">
+					<Dialog size="lg" className="w-lg">
+						<div className="border-b border-kumo-fill px-6 py-4">
 							{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-							<Dialog.Title className="text-lg font-semibold text-text">
+							<Dialog.Title className="text-lg font-semibold text-kumo-default">
 								Delete this instance?
 							</Dialog.Title>
 						</div>
 
 						<div className="px-6 py-5">
-							<p className="text-sm text-text-secondary">
+							<p className="text-sm text-kumo-subtle">
 								This will permanently delete the instance and its persistence
 								data. This action cannot be undone.
 							</p>
-							<div className="mt-3 rounded-lg border border-border bg-bg-secondary px-4 py-3">
-								<span className="text-xs text-text-secondary">Instance ID</span>
-								<p className="mt-0.5 font-mono text-sm text-text">
+							<div className="mt-3 rounded-lg border border-kumo-fill bg-kumo-elevated px-4 py-3">
+								<span className="text-xs text-kumo-subtle">Instance ID</span>
+								<p className="mt-0.5 font-mono text-sm text-kumo-default">
 									{instanceId}
 								</p>
 							</div>
 						</div>
 
-						<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+						<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 							<Button
 								variant="secondary"
 								onClick={() => setDeleteDialogOpen(false)}
@@ -554,20 +560,20 @@ function InstanceDetailView() {
 						}
 					}}
 				>
-					<Dialog size="lg" className="w-[32rem]">
-						<div className="border-b border-border px-6 py-4">
+					<Dialog size="lg" className="w-lg">
+						<div className="border-b border-kumo-fill px-6 py-4">
 							{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-							<Dialog.Title className="text-lg font-semibold text-text">
+							<Dialog.Title className="text-lg font-semibold text-kumo-default">
 								Send Event
 							</Dialog.Title>
 						</div>
 						<div className="space-y-4 px-6 py-5">
 							<div>
-								<label className="mb-2 block text-sm font-medium text-text">
+								<label className="mb-2 block text-sm font-medium text-kumo-default">
 									Event Type
 								</label>
 								<input
-									className="w-full rounded-lg border border-border bg-bg px-3 py-2.5 text-sm text-text placeholder-text-secondary focus:border-primary focus:shadow-focus-primary focus:outline-none"
+									className="w-full rounded-lg border border-kumo-fill bg-kumo-base px-3 py-2.5 text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 									onChange={(e) => setEventType(e.target.value)}
 									placeholder="my-event"
 									type="text"
@@ -575,14 +581,14 @@ function InstanceDetailView() {
 								/>
 							</div>
 							<div>
-								<label className="mb-2 block text-sm font-medium text-text">
+								<label className="mb-2 block text-sm font-medium text-kumo-default">
 									Payload{" "}
-									<span className="font-normal text-text-secondary">
+									<span className="font-normal text-kumo-subtle">
 										(optional)
 									</span>
 								</label>
 								<textarea
-									className="w-full resize-y rounded-lg border border-border bg-bg px-3 py-2.5 font-mono text-sm text-text placeholder-text-secondary focus:border-primary focus:shadow-focus-primary focus:outline-none"
+									className="w-full resize-y rounded-lg border border-kumo-fill bg-kumo-base px-3 py-2.5 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 									onChange={(e) => setEventPayload(e.target.value)}
 									placeholder='{"key": "value"}'
 									rows={4}
@@ -590,7 +596,7 @@ function InstanceDetailView() {
 								/>
 							</div>
 						</div>
-						<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+						<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 							<Button
 								variant="secondary"
 								onClick={() => setSendEventOpen(false)}
@@ -639,7 +645,7 @@ function InstanceDetailView() {
 				{/* Content */}
 				<div className="space-y-8 px-32 py-6">
 					{error && (
-						<div className="rounded-lg border border-danger/20 bg-danger/8 p-4 text-sm text-danger">
+						<div className="rounded-lg border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-sm text-kumo-danger">
 							{error}
 						</div>
 					)}
diff --git a/packages/local-explorer-ui/src/routes/workflows/$workflowName/index.tsx b/packages/local-explorer-ui/src/routes/workflows/$workflowName/index.tsx
index 5b2fdd8d89..0507d9b780 100644
--- a/packages/local-explorer-ui/src/routes/workflows/$workflowName/index.tsx
+++ b/packages/local-explorer-ui/src/routes/workflows/$workflowName/index.tsx
@@ -69,49 +69,49 @@ const STATUS_SUMMARY_CONFIG = [
 		key: "complete",
 		label: "Complete",
 		icon: CheckCircleIcon,
-		color: "text-[#2b7bfb] dark:text-[#004ac2]",
+		color: "text-kumo-link",
 		weight: "fill" as const,
 	},
 	{
 		key: "errored",
 		label: "Errored",
 		icon: WarningCircleIcon,
-		color: "text-[#fb2b36] dark:text-[#c10007]",
+		color: "text-kumo-danger",
 		weight: "fill" as const,
 	},
 	{
 		key: "queued",
 		label: "Queued",
 		icon: CircleNotchIcon,
-		color: "text-text-secondary",
+		color: "text-kumo-subtle",
 		weight: "regular" as const,
 	},
 	{
 		key: "running",
 		label: "Running",
 		icon: PlayIcon,
-		color: "text-text-secondary",
+		color: "text-kumo-subtle",
 		weight: "fill" as const,
 	},
 	{
 		key: "paused",
 		label: "Paused",
 		icon: PauseIcon,
-		color: "text-text-secondary",
+		color: "text-kumo-subtle",
 		weight: "fill" as const,
 	},
 	{
 		key: "waiting",
 		label: "Waiting",
 		icon: SpinnerIcon,
-		color: "text-text-secondary",
+		color: "text-kumo-subtle",
 		weight: "regular" as const,
 	},
 	{
 		key: "terminated",
 		label: "Terminated",
 		icon: SquareIcon,
-		color: "text-text-secondary",
+		color: "text-kumo-subtle",
 		weight: "fill" as const,
 	},
 ] as const;
@@ -122,15 +122,15 @@ const StatusSummary = memo(function StatusSummary({
 	statusCounts: Record<string, number>;
 }): JSX.Element {
 	return (
-		<div className="mb-4 flex divide-x divide-border overflow-hidden rounded-lg border border-border bg-bg">
+		<div className="mb-4 flex divide-x divide-kumo-fill overflow-hidden rounded-lg border border-kumo-fill bg-kumo-elevated">
 			{STATUS_SUMMARY_CONFIG.map(
 				({ key, label, icon: Icon, color, weight }) => (
 					<div className="flex-1 px-3 py-2" key={key}>
-						<div className="flex items-center gap-1.5 text-xs text-text-secondary">
+						<div className="flex items-center gap-1.5 text-xs text-kumo-subtle">
 							<Icon className={color} size={12} weight={weight} />
 							{label}
 						</div>
-						<div className="mt-0.5 text-base text-text">
+						<div className="mt-0.5 text-base text-kumo-default">
 							{statusCounts[key] ?? 0}
 						</div>
 					</div>
@@ -150,25 +150,23 @@ const ACTION_CONFIG_LIST: Record<
 > = {
 	pause: {
 		icon: PauseIcon,
-		style:
-			"border-border bg-bg text-text-secondary dark:text-text hover:bg-border/60",
+		style: "border-kumo-fill bg-kumo-base text-kumo-default hover:bg-kumo-fill",
 		weight: "fill",
 	},
 	resume: {
 		icon: PlayIcon,
-		style:
-			"border-border bg-bg text-text-secondary dark:text-text hover:bg-border/60",
+		style: "border-kumo-fill bg-kumo-base text-kumo-default hover:bg-kumo-fill",
 		weight: "fill",
 	},
 	restart: {
 		icon: ArrowClockwiseIcon,
-		style:
-			"border-border bg-bg text-text-secondary dark:text-text hover:bg-border/60",
+		style: "border-kumo-fill bg-kumo-base text-kumo-default hover:bg-kumo-fill",
 		weight: "regular",
 	},
 	terminate: {
 		icon: StopIcon,
-		style: "border-border bg-bg text-danger hover:bg-danger/10",
+		style:
+			"border-kumo-fill bg-kumo-base text-kumo-danger hover:bg-kumo-danger/10",
 		weight: "fill",
 	},
 };
@@ -294,18 +292,18 @@ const InstanceRow = memo(function InstanceRow({
 
 	return (
 		<>
-			<div className="border-b border-border bg-bg p-1 last:border-b-0">
+			<div className="border-b border-kumo-fill bg-kumo-elevated p-1 last:border-b-0">
 				<div
-					className="grid h-10 cursor-pointer grid-cols-[100px_60px_1fr_auto] items-center gap-3 rounded-lg px-2 transition-colors hover:bg-border/60"
+					className="grid h-10 cursor-pointer grid-cols-[100px_60px_1fr_auto] items-center gap-3 rounded-lg px-2 transition-colors hover:bg-kumo-fill"
 					onClick={handleRowClick}
 				>
 					<div>
 						<WorkflowStatusBadge status={status} />
 					</div>
-					<span className="text-sm text-text-secondary">
+					<span className="text-sm text-kumo-subtle">
 						{timeAgo(instance.created_on) || "—"}
 					</span>
-					<span className="truncate font-mono text-xs text-text">
+					<span className="truncate font-mono text-xs text-kumo-default">
 						{instance.id}
 					</span>
 					<div className="flex items-center gap-1">
@@ -334,7 +332,7 @@ const InstanceRow = memo(function InstanceRow({
 							status !== "errored" &&
 							status !== "terminated" && (
 								<button
-									className="ml-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-border bg-bg text-text-secondary transition-colors hover:bg-border/60 disabled:cursor-not-allowed disabled:opacity-40 dark:text-text"
+									className="ml-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-kumo-fill bg-kumo-base text-kumo-default transition-colors hover:bg-kumo-fill disabled:cursor-not-allowed disabled:opacity-40"
 									disabled={actionInProgress !== null}
 									onClick={handleSendEventClick}
 									title="Send Event"
@@ -343,7 +341,7 @@ const InstanceRow = memo(function InstanceRow({
 								</button>
 							)}
 						<button
-							className="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-border bg-bg text-danger transition-colors hover:bg-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
+							className="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-kumo-fill bg-kumo-base text-kumo-danger transition-colors hover:bg-kumo-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
 							disabled={actionInProgress !== null}
 							onClick={handleDeleteClick}
 							title="Delete"
@@ -357,27 +355,27 @@ const InstanceRow = memo(function InstanceRow({
 			{/* Delete confirmation dialog — outside Table.Row to prevent click propagation */}
 			<Dialog.Root open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
 				<Dialog size="lg">
-					<div className="border-b border-border px-6 pt-6 pb-4">
+					<div className="border-b border-kumo-fill px-6 pt-6 pb-4">
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Title className="text-lg font-semibold text-text">
+						<Dialog.Title className="text-lg font-semibold text-kumo-default">
 							Delete this instance?
 						</Dialog.Title>
-						<p className="mt-1 text-sm text-text-secondary">
+						<p className="mt-1 text-sm text-kumo-subtle">
 							This will permanently delete the instance and its persistence
 							data. This action cannot be undone.
 						</p>
 					</div>
 
 					<div className="px-6 py-4">
-						<div className="rounded-lg border border-border bg-bg-secondary px-4 py-3">
-							<span className="text-xs text-text-secondary">Instance ID</span>
-							<p className="mt-0.5 font-mono text-sm text-text">
+						<div className="rounded-lg border border-kumo-fill bg-kumo-elevated px-4 py-3">
+							<span className="text-xs text-kumo-subtle">Instance ID</span>
+							<p className="mt-0.5 font-mono text-sm text-kumo-default">
 								{instance.id}
 							</p>
 						</div>
 					</div>
 
-					<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+					<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 						<Button
 							variant="secondary"
 							onClick={() => setDeleteDialogOpen(false)}
@@ -405,21 +403,21 @@ const InstanceRow = memo(function InstanceRow({
 					}
 				}}
 			>
-				<Dialog size="lg" className="w-[32rem]">
-					<div className="border-b border-border px-6 py-4">
+				<Dialog size="lg" className="w-lg">
+					<div className="border-b border-kumo-fill px-6 py-4">
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Title className="text-lg font-semibold text-text">
+						<Dialog.Title className="text-lg font-semibold text-kumo-default">
 							Send Event
 						</Dialog.Title>
 					</div>
 
 					<div className="space-y-4 px-6 py-5">
 						<div>
-							<label className="mb-2 block text-sm font-medium text-text">
+							<label className="mb-2 block text-sm font-medium text-kumo-default">
 								Event Type
 							</label>
 							<input
-								className="w-full rounded-lg border border-border bg-bg px-3 py-2.5 text-sm text-text placeholder-text-secondary focus:border-primary focus:shadow-focus-primary focus:outline-none"
+								className="w-full rounded-lg border border-kumo-fill bg-kumo-base px-3 py-2.5 text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 								onChange={(e) => setEventType(e.target.value)}
 								placeholder="my-event"
 								type="text"
@@ -427,14 +425,12 @@ const InstanceRow = memo(function InstanceRow({
 							/>
 						</div>
 						<div>
-							<label className="mb-2 block text-sm font-medium text-text">
+							<label className="mb-2 block text-sm font-medium text-kumo-default">
 								Payload{" "}
-								<span className="font-normal text-text-secondary">
-									(optional)
-								</span>
+								<span className="font-normal text-kumo-subtle">(optional)</span>
 							</label>
 							<textarea
-								className="w-full resize-y rounded-lg border border-border bg-bg px-3 py-2.5 font-mono text-sm text-text placeholder-text-secondary focus:border-primary focus:shadow-focus-primary focus:outline-none"
+								className="w-full resize-y rounded-lg border border-kumo-fill bg-kumo-base px-3 py-2.5 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
 								onChange={(e) => setEventPayload(e.target.value)}
 								placeholder='{"key": "value"}'
 								rows={4}
@@ -443,7 +439,7 @@ const InstanceRow = memo(function InstanceRow({
 						</div>
 					</div>
 
-					<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+					<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 						<Button
 							variant="secondary"
 							onClick={() => setSendEventOpen(false)}
@@ -508,17 +504,17 @@ function SettingsTab({
 
 	return (
 		<div className="px-32 py-6">
-			<h3 className="mb-4 text-lg font-semibold text-text">
+			<h3 className="mb-4 text-lg font-semibold text-kumo-default">
 				Delete all instances
 			</h3>
-			<div className="overflow-hidden rounded-lg border border-border bg-bg">
+			<div className="overflow-hidden rounded-lg border border-kumo-fill bg-kumo-base">
 				<div className="flex items-center justify-between gap-4 px-4 py-1.5">
-					<p className="text-sm text-text-secondary">
+					<p className="text-sm text-kumo-subtle">
 						Permanently delete all workflow instances and their persistence
 						data.
 					</p>
 					<button
-						className="inline-flex shrink-0 cursor-pointer items-center rounded-lg bg-bg p-3 text-sm font-medium text-danger transition-colors hover:bg-danger/10"
+						className="inline-flex shrink-0 cursor-pointer items-center rounded-lg bg-kumo-base p-3 text-sm font-medium text-kumo-danger transition-colors hover:bg-kumo-danger/10"
 						onClick={() => handleOpenChange(true)}
 					>
 						Delete
@@ -527,29 +523,31 @@ function SettingsTab({
 			</div>
 
 			<Dialog.Root open={confirmOpen} onOpenChange={handleOpenChange}>
-				<Dialog size="lg" className="w-[32rem]">
-					<div className="border-b border-border px-6 py-4">
+				<Dialog size="lg" className="w-lg">
+					<div className="border-b border-kumo-fill px-6 py-4">
 						{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-						<Dialog.Title className="text-lg font-semibold text-text">
+						<Dialog.Title className="text-lg font-semibold text-kumo-default">
 							Delete all instances
 						</Dialog.Title>
 					</div>
 
 					<div className="px-6 py-5">
 						{error && (
-							<div className="mb-4 rounded-lg border border-danger/20 bg-danger/8 p-3 text-sm text-danger">
+							<div className="mb-4 rounded-lg border border-kumo-danger/20 bg-kumo-danger/8 p-3 text-sm text-kumo-danger">
 								{error}
 							</div>
 						)}
-						<p className="text-sm text-text-secondary">
+						<p className="text-sm text-kumo-subtle">
 							This will permanently delete all instances of{" "}
-							<span className="font-semibold text-text">{workflowName}</span>.
-							All instance data and persistence files will be removed. This
+							<span className="font-semibold text-kumo-default">
+								{workflowName}
+							</span>
+							. All instance data and persistence files will be removed. This
 							action cannot be undone.
 						</p>
 					</div>
 
-					<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+					<div className="flex justify-end gap-2 border-t border-kumo-fill px-6 py-4">
 						<Button
 							variant="secondary"
 							onClick={() => handleOpenChange(false)}
@@ -730,7 +728,7 @@ function WorkflowInstancesView() {
 			/>
 
 			<div className="px-8 pt-4">
-				<div className="tabs-styled inline-flex">
+				<div className="inline-flex">
 					<Tabs
 						variant="segmented"
 						tabs={[
@@ -741,7 +739,7 @@ function WorkflowInstancesView() {
 						onValueChange={setActiveTab}
 					/>
 				</div>
-				<hr className="-mx-8 mt-4 border-border" />
+				<hr className="-mx-8 mt-4 border-kumo-fill" />
 			</div>
 
 			{activeTab === "instances" && (
@@ -749,7 +747,7 @@ function WorkflowInstancesView() {
 					{totalCount > 0 && !initialLoad && (
 						<>
 							<StatusSummary statusCounts={statusCounts} />
-							<hr className="-mx-8 mb-4 border-border" />
+							<hr className="-mx-8 mb-4 border-kumo-fill" />
 						</>
 					)}
 
@@ -757,7 +755,7 @@ function WorkflowInstancesView() {
 						<DropdownMenu>
 							<DropdownMenu.Trigger
 								render={
-									<button className="inline-flex h-9 w-36 cursor-pointer items-center justify-between rounded-lg border border-border bg-bg px-3 text-base text-text transition-colors hover:bg-border/60">
+									<Button className="min-w-36" icon={CaretDownIcon}>
 										<span>
 											{statusFilter === "all"
 												? "All"
@@ -765,24 +763,24 @@ function WorkflowInstancesView() {
 														(s) => s.key === statusFilter
 													)?.label ?? statusFilter)}
 										</span>
-										<CaretDownIcon size={14} className="text-text-secondary" />
-									</button>
+									</Button>
 								}
 							/>
 							<DropdownMenu.Content
 								align="start"
-								className="w-36 bg-bg"
+								className="w-36 bg-kumo-base"
 								side="bottom"
 							>
 								<DropdownMenu.Item
-									className="cursor-pointer rounded-md transition-colors hover:bg-border/60"
+									className="cursor-pointer rounded-md transition-colors hover:bg-kumo-fill"
 									onClick={() => handleStatusFilterChange("all")}
 								>
 									All
 								</DropdownMenu.Item>
-								{STATUS_SUMMARY_CONFIG.map(({ key, label }) => (
+								{STATUS_SUMMARY_CONFIG.map(({ key, label, icon: Icon }) => (
 									<DropdownMenu.Item
-										className="cursor-pointer rounded-md transition-colors hover:bg-border/60"
+										className="cursor-pointer rounded-md transition-colors hover:bg-kumo-fill"
+										icon={<Icon />}
 										key={key}
 										onClick={() => handleStatusFilterChange(key)}
 									>
@@ -793,13 +791,14 @@ function WorkflowInstancesView() {
 						</DropdownMenu>
 
 						<div className="flex items-center gap-2">
-							<button
+							<Button
 								aria-label="Refresh"
-								className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-border bg-bg text-text transition-colors hover:bg-border/60"
 								onClick={() => void fetchInstances()}
+								shape="square"
 							>
 								<ArrowsCounterClockwiseIcon size={14} />
-							</button>
+							</Button>
+
 							<Button
 								onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
 									(e.target as HTMLButtonElement).blur();
@@ -814,21 +813,19 @@ function WorkflowInstancesView() {
 					</div>
 
 					{error && (
-						<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
+						<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-kumo-danger">
 							{error}
 						</div>
 					)}
 
 					{initialLoad ? (
-						<div className="p-12 text-center text-text-secondary">
-							Loading...
-						</div>
+						<div className="p-12 text-center text-kumo-subtle">Loading...</div>
 					) : instances.length === 0 && !fetching ? (
-						<div className="rounded-lg border border-border bg-bg px-5 py-8 text-center text-sm text-text-secondary">
+						<div className="rounded-lg border border-kumo-fill bg-kumo-elevated px-5 py-8 text-center text-sm text-kumo-subtle">
 							No instances found
 						</div>
 					) : instances.length === 0 ? (
-						<div className="rounded-lg border border-border bg-bg px-5 py-8 text-center text-sm text-text-secondary">
+						<div className="rounded-lg border border-kumo-fill bg-kumo-elevated px-5 py-8 text-center text-sm text-kumo-subtle">
 							{statusFilter !== "all" ? (
 								<>No instances found in state &lsquo;{statusFilter}&rsquo;</>
 							) : (
@@ -839,7 +836,7 @@ function WorkflowInstancesView() {
 						<div
 							className={`transition-opacity duration-150 ${fetching ? "opacity-60" : "opacity-100"}`}
 						>
-							<div className="overflow-hidden rounded-lg border border-border">
+							<div className="overflow-hidden rounded-lg border border-kumo-fill">
 								{instances.map((instance) => (
 									<InstanceRow
 										instance={instance}
@@ -854,44 +851,34 @@ function WorkflowInstancesView() {
 								<div className="flex items-center justify-between pt-4">
 									<DropdownMenu>
 										<DropdownMenu.Trigger
-											render={
-												<button className="inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-bg px-3 text-base text-text transition-colors hover:bg-border/60">
-													{perPage}
-													<CaretUpDownIcon
-														size={12}
-														className="text-text-secondary"
-													/>
-												</button>
-											}
+											render={<Button icon={CaretUpDownIcon}>{perPage}</Button>}
 										/>
 										<DropdownMenu.Content
 											align="start"
-											className="bg-bg"
+											className="bg-kumo-base"
 											side="top"
 										>
 											{[10, 25, 50, 100].map((size) => (
 												<DropdownMenu.Item
-													className="cursor-pointer rounded-md transition-colors hover:bg-border/60"
+													className="cursor-pointer rounded-md transition-colors hover:bg-kumo-fill"
 													key={size}
 													onClick={() => handlePerPageChange(size)}
 												>
 													{size}
 													{size === perPage && (
-														<span className="ml-2 text-text-secondary">✓</span>
+														<span className="ml-2 text-kumo-subtle">✓</span>
 													)}
 												</DropdownMenu.Item>
 											))}
 										</DropdownMenu.Content>
 									</DropdownMenu>
 
-									<div className="pagination-styled">
-										<Pagination
-											page={page}
-											perPage={perPage}
-											setPage={handlePageChange}
-											totalCount={totalCount}
-										/>
-									</div>
+									<Pagination
+										page={page}
+										perPage={perPage}
+										setPage={handlePageChange}
+										totalCount={totalCount}
+									/>
 								</div>
 							)}
 						</div>
diff --git a/packages/local-explorer-ui/src/styles/tailwind.css b/packages/local-explorer-ui/src/styles/tailwind.css
index 792c631716..694fd78d3b 100644
--- a/packages/local-explorer-ui/src/styles/tailwind.css
+++ b/packages/local-explorer-ui/src/styles/tailwind.css
@@ -6,175 +6,38 @@
 @custom-variant dark (@media (prefers-color-scheme: dark));
 
 @theme {
-	/* Cloudflare Workers brand colors - Light mode (default) */
-	--color-bg: #fffdfb;
-	--color-bg-secondary: #fef7ed;
-	--color-bg-tertiary: #fffbf5;
-	--color-text: #521000;
-	--color-text-secondary: #521000b3;
-	--color-border: #ebd5c1;
-	--color-primary: #ff4801;
-	--color-primary-hover: #ff7038;
-	--color-danger: #fb2c36;
-	--color-danger-hover: #dc2626;
-	--color-success: #16a34a;
-
-	/* Surface colors */
-	--color-surface: #fef7ed;
-	--color-surface-secondary: #f5f0eb;
-	--color-surface-tertiary: #ebe3db;
-	--color-muted: #8a6e5c;
-	--color-accent: #f0e6dc;
-	--color-background: #fffdfb;
-	--color-border-active: #ff4801;
-	--color-tooltip-bg: #3d2e24;
-	--color-tooltip-text: #ffeee6;
-	--color-resizer: #d4c4b6;
-
-	/* SQL editor chrome */
-	--color-selection: rgba(82, 16, 0, 0.12);
-	--color-active-line: rgba(82, 16, 0, 0.05);
-
-	/* SQL editor syntax highlighting */
-	--color-syntax-keyword: #0000ff;
-	--color-syntax-string: #d16969;
-	--color-syntax-number: #098658;
-	--color-syntax-comment: #6a737d;
-	--color-syntax-operator: #5a5a5a;
-	--color-syntax-table: #e84393;
-
-	/* Focus ring shadows */
-	--shadow-focus-primary: 0 0 0 3px rgba(255, 72, 1, 0.15);
-	--shadow-focus-danger: 0 0 0 3px rgba(251, 44, 54, 0.15);
-
-	/* Custom sizing */
+	/* Local Explorer layout sizing */
 	--width-sidebar: 240px;
-}
-
-/*
- * Map @cloudflare/kumo component tokens to our brand theme.
- * Kumo's DropdownMenu, Button, Input, Tooltip, etc. reference --color-kumo-*
- * and --text-color-kumo-* variables internally. Without these mappings,
- * backgrounds and text colors resolve to transparent/invisible.
- */
-:root {
-	/* Background tokens */
-	--color-kumo-base: var(--color-background);
-	--color-kumo-control: var(--color-surface);
-	--color-kumo-elevated: var(--color-surface-secondary);
-	--color-kumo-overlay: var(--color-accent);
-	--color-kumo-recessed: var(--color-surface-tertiary);
-	--color-kumo-tint: var(--color-surface-secondary);
-
-	/* Interactive / brand tokens */
-	--color-kumo-brand: var(--color-primary);
-	--color-kumo-brand-hover: var(--color-primary-hover);
-	--color-kumo-interact: var(--color-surface-tertiary);
-	--color-kumo-danger: var(--color-danger);
-
-	/* Border / line tokens */
-	--color-kumo-fill: var(--color-border);
-	--color-kumo-line: var(--color-border);
-	--color-kumo-ring: var(--color-muted);
 
-	/* Tooltip tokens */
-	--color-kumo-tip-shadow: rgba(0, 0, 0, 0.08);
-	--color-kumo-tip-stroke: transparent;
-
-	/* Text color tokens */
-	--text-color-kumo-default: var(--color-text);
-	--text-color-kumo-subtle: var(--color-muted);
-	--text-color-kumo-inactive: var(--color-muted);
-	--text-color-kumo-danger: var(--color-danger);
-	--text-color-kumo-link: var(--color-primary);
-}
-
-/* Dark mode color overrides */
-@media (prefers-color-scheme: dark) {
-	:root {
-		--color-bg: #1a1412;
-		--color-bg-secondary: #0f0c0a;
-		--color-bg-tertiary: #231c18;
-		--color-text: #ffeee6;
-		--color-text-secondary: #ffeee6b3;
-		--color-border: #3d2e24;
-		--color-primary: #ff6b33;
-		--color-primary-hover: #ff8855;
-		--color-danger: #ff4d55;
-		--color-danger-hover: #ef4444;
-		--color-success: #22c55e;
-
-		/* Studio surface colors — dark mode */
-		--color-surface: #0f0c0a;
-		--color-surface-secondary: #231c18;
-		--color-surface-tertiary: #3d2e24;
-		--color-muted: #a08678;
-		--color-accent: #2e221a;
-		--color-background: #1a1412;
-		--color-border-active: #ff6b33;
-		--color-tooltip-bg: #3d2e24;
-		--color-tooltip-text: #ffeee6;
-		--color-resizer: #3d2e24;
-
-		/* SQL editor chrome — dark mode */
-		--color-selection: rgba(255, 238, 230, 0.15);
-		--color-active-line: rgba(255, 238, 230, 0.06);
-
-		/* SQL editor syntax highlighting — dark mode */
-		--color-syntax-keyword: #4078f2;
-		--color-syntax-string: #d16969;
-		--color-syntax-number: #808080;
-		--color-syntax-comment: #6a737d;
-		--color-syntax-operator: #bfbfbf;
-		--color-syntax-table: #fd79a8;
-
-		--shadow-focus-primary: 0 0 0 3px rgba(255, 107, 51, 0.25);
-		--shadow-focus-danger: 0 0 0 3px rgba(255, 77, 85, 0.25);
-
-		/* Kumo tooltip overrides for dark mode */
-		--color-kumo-tip-shadow: transparent;
-		--color-kumo-tip-stroke: var(--color-border);
-
-		/* Kumo overlay override for dark mode - darker backdrop for dialogs */
-		--color-kumo-overlay: var(--color-surface);
-	}
+	/* Studio/editor tokens mapped to stock Kumo/Tailwind palette */
+	--studio-editor-selection: color-mix(
+		in oklch,
+		var(--color-kumo-brand) 18%,
+		transparent
+	);
+	--studio-editor-active-line: color-mix(
+		in oklch,
+		var(--color-kumo-brand) 8%,
+		transparent
+	);
+	--studio-editor-caret: var(--text-color-kumo-default);
+	--studio-editor-gutter-bg: var(--color-kumo-elevated);
+	--studio-editor-gutter-text: var(--text-color-kumo-subtle);
+	--studio-editor-panel-bg: var(--color-kumo-base);
+	--studio-editor-panel-border: var(--color-kumo-fill);
+	--studio-editor-panel-hover: var(--color-kumo-overlay);
+	--studio-editor-panel-text: var(--text-color-kumo-default);
+	--studio-syntax-keyword: light-dark(#0000ff, #4078f2);
+	--studio-syntax-string: #d16969;
+	--studio-syntax-number: light-dark(#098658, #808080);
+	--studio-syntax-comment: #6a737d;
+	--studio-syntax-operator: light-dark(#5a5a5a, #bfbfbf);
+	--studio-syntax-table: light-dark(#e84393, #fd79a8);
+	--studio-statement-highlight-border: var(--color-kumo-brand);
 }
 
 @layer base {
 	body {
-		font-family:
-			-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-			sans-serif;
-		@apply text-text bg-bg-secondary text-sm leading-normal;
+		@apply bg-kumo-elevated text-kumo-default text-sm leading-normal;
 	}
 }
-
-/* Style Kumo Pagination buttons to match our theme — background only, no border changes */
-.pagination-styled button {
-	background-color: var(--color-bg);
-}
-
-.pagination-styled button:hover:not(:disabled) {
-	background-color: color-mix(in srgb, var(--color-border) 60%, transparent);
-}
-
-.pagination-styled button:disabled {
-	opacity: 0.4;
-}
-
-.pagination-styled input {
-	background-color: var(--color-bg);
-}
-
-/* Tabs: inactive track uses surface-tertiary, active indicator matches table rows */
-.tabs-styled [role="tablist"] {
-	background-color: var(--color-surface-tertiary);
-}
-
-.tabs-styled [data-active] {
-	background-color: var(--color-bg);
-}
-
-.tabs-styled [role="tab"] {
-	font-weight: 400;
-}