diff --git a/web/src/lib/components/kit/Button.svelte b/web/src/lib/components/kit/Button.svelte
deleted file mode 100644
index e052f1c..0000000
--- a/web/src/lib/components/kit/Button.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import type { Component, Snippet } from "svelte";
-	import Icon from "./Icon.svelte";
-
-	interface Props {
-		children: Snippet;
-		onclick?: () => void;
-		type?: "button" | "submit";
-		variant?: "primary" | "ghost" | "accent" | "danger";
-		icon?: Component<{ size?: number; class?: string }>;
-		disabled?: boolean;
-	}
-	let {
-		children,
-		onclick,
-		type = "button",
-		variant = "primary",
-		icon,
-		disabled = false,
-	}: Props = $props();
-</script>
-
-<button
-	{type}
-	class="btn btn--{variant}"
-	{disabled}
-	onclick={() => onclick?.()}
->
-	{#if icon}<Icon {icon} size={14} />{/if}
-	<span class="btn-label">{@render children()}</span>
-</button>
-
-<style>
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.4rem 0.8rem;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: transparent;
-		color: var(--foreground);
-		font: inherit;
-		font-size: 0.85rem;
-		cursor: pointer;
-	}
-	.btn--primary {
-		background: var(--blue);
-		color: #fff;
-		border-color: var(--blue);
-	}
-	.btn--ghost:hover:not(:disabled) {
-		border-color: var(--blue);
-	}
-	.btn--accent {
-		background: var(--cyan);
-		color: #042;
-		border-color: var(--cyan);
-	}
-	.btn--danger {
-		background: var(--danger);
-		color: #fff;
-		border-color: var(--danger);
-	}
-	.btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>
diff --git a/web/src/lib/components/kit/PreviewTile.svelte b/web/src/lib/components/kit/PreviewTile.svelte
index 04570b7..fb85a42 100644
--- a/web/src/lib/components/kit/PreviewTile.svelte
+++ b/web/src/lib/components/kit/PreviewTile.svelte
@@ -4,11 +4,11 @@
 	interface Props {
 		label: string;
 		caption: string;
-		active: boolean;
+		active?: boolean;
 		children: Snippet;
 	}
 
-	let { label, caption, active, children }: Props = $props();
+	let { label, caption, active = false, children }: Props = $props();
 </script>
 
 <div class="preview-tile" class:active>
diff --git a/web/src/lib/components/kit/ui/Button.svelte b/web/src/lib/components/kit/ui/Button.svelte
new file mode 100644
index 0000000..1a39659
--- /dev/null
+++ b/web/src/lib/components/kit/ui/Button.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import Icon from "../Icon.svelte";
+
+	const ButtonVariantDefine = {
+		PRIMARY: "primary",
+		OUTLINE: "outline",
+		ACCENT: "accent",
+		DANGER: "danger",
+	} as const;
+
+	type ButtonVariant =
+		(typeof ButtonVariantDefine)[keyof typeof ButtonVariantDefine];
+
+	interface Props {
+		children: Snippet;
+		onclick?: () => void;
+		variant?: ButtonVariant;
+		icon?: Component<{ size?: number; class?: string }>;
+		disabled?: boolean;
+	}
+	let {
+		children,
+		onclick,
+		variant = ButtonVariantDefine.PRIMARY,
+		icon,
+		disabled = false,
+	}: Props = $props();
+</script>
+
+<button class="btn btn--{variant}" {disabled} onclick={() => onclick?.()}>
+	{#if icon}<Icon {icon} size={14} />{/if}
+	<span class="btn-label">{@render children()}</span>
+</button>
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-xl);
+		border-color: var(--color-main);
+		border-width: var(--size-border-thick);
+		border-radius: var(--radius-s);
+		font-size: var(--font-button);
+		font-weight: bold;
+		cursor: pointer;
+		background: var(--color-main);
+		color: var(--color-background);
+	}
+
+	.btn--outline {
+		background: transparent;
+		color: var(--color-main-tint);
+		border-color: var(--color-main-tint);
+	}
+
+	.btn--accent {
+		background: var(--color-accent);
+		color: var(--color-background);
+		border-color: var(--color-accent);
+	}
+
+	.btn--danger {
+		background: var(--color-danger);
+		color: var(--color-background);
+		border-color: var(--color-danger);
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>
diff --git a/web/src/preview.css b/web/src/preview.css
index e965f93..d832d0c 100644
--- a/web/src/preview.css
+++ b/web/src/preview.css
@@ -126,12 +126,13 @@
 		--space-s: 4px;
 		--space-m: 8px;
 		--space-l: 12px;
-		--space-xl: 12px;
+		--space-xl: 16px;
 
 		--size-border: 1px;
 		--size-border-thick: 2px;
 
 		--font-text: 10px;
+		--font-button: 14px;
 
 		--radius-s: 0px;
 		--radius-m: 4px;
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index f462aed..dab0915 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { TOOLS } from "$lib/registry";
 	import Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import TextField from "$lib/components/kit/TextField.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
-	import Button from "$lib/components/kit/Button.svelte";
+	import Button from "$lib/components/kit/ui/Button.svelte";
+	import { TOOLS } from "$lib/registry";
 	import { Search } from "@lucide/svelte";
 
 	let query = $state("");
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 3e343c6..a532d57 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Button from "$lib/components/kit/Button.svelte";
 	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
 	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
@@ -23,6 +22,7 @@
 	import Toggle from "$lib/components/kit/Toggle.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
+	import Button from "$lib/components/kit/ui/Button.svelte";
 	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");
@@ -63,7 +63,7 @@
 		<div class="stack">
 			<SettingGroup label="variants">
 				<Button onclick={() => {}}>Primary</Button>
-				<Button variant="ghost" onclick={() => {}}>Ghost</Button>
+				<Button variant="outline" onclick={() => {}}>Outline</Button>
 				<Button variant="accent" onclick={() => {}}>Accent</Button>
 				<Button variant="danger" onclick={() => {}}>Danger</Button>
 			</SettingGroup>
@@ -133,10 +133,12 @@
 				]}
 			/>
 			<SettingGroup label="tones">
-				<Badge>default</Badge>
-				<Badge tone="accent">accent</Badge>
-				<Badge tone="success">success</Badge>
-				<Badge tone="amber">amber</Badge>
+				<Badge label="default" />
+				<Badge tone="accent" label="accent" />
+				<Badge tone="success" label="success" />
+				<Badge tone="danger" label="default" />
+				<Badge tone="warning" label="warning" />
+				<Badge tone="info" label="info" />
 			</SettingGroup>
 		</div>
 	</Panel>
diff --git a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
index 1c03102..6fd31c2 100644
--- a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Button from "$lib/components/kit/Button.svelte";
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
 	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import Dropzone from "$lib/components/kit/Dropzone.svelte";
@@ -10,6 +9,7 @@
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import StatusLine from "$lib/components/kit/StatusLine.svelte";
+	import Button from "$lib/components/kit/ui/Button.svelte";
 	import type { PixelImage } from "$lib/core/types";
 
 	interface PreviewItem {
diff --git a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
index 033b731..aa76b4e 100644
--- a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Button from "$lib/components/kit/Button.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
@@ -7,6 +6,7 @@
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
+	import Button from "$lib/components/kit/ui/Button.svelte";
 	import { getTool } from "$lib/registry";
 	import ParamControl from "./ParamControl.svelte";