diff --git a/web/src/lib/components/kit/DownloadButton.svelte b/web/src/lib/components/kit/ui/DownloadButton.svelte
similarity index 66%
rename from web/src/lib/components/kit/DownloadButton.svelte
rename to web/src/lib/components/kit/ui/DownloadButton.svelte
index d14c196..38c5428 100644
--- a/web/src/lib/components/kit/DownloadButton.svelte
+++ b/web/src/lib/components/kit/ui/DownloadButton.svelte
@@ -16,20 +16,21 @@
 
 <style>
 	.download-btn {
-		background: var(--blue);
-		color: #fff;
+		background: var(--color-main);
+		color: var(--color-background);
 		width: 100%;
-		height: 42px;
-		font: 11px var(--font-mono);
+		height: calc(5 * var(--space-m));
+		font-size: var(--font-button);
+		font-family: var(--font-mono);
 		border: 0;
 		justify-content: center;
 		align-items: center;
-		gap: 9px;
-		margin-top: 18px;
+		gap: var(--space-m);
+		margin-top: var(--space-xl);
 		display: flex;
 		white-space: nowrap;
 	}
 	.download-btn:hover {
-		background: color-mix(in srgb, var(--blue) 88%, #000);
+		background: var(--color-main-tint);
 	}
 </style>
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 29d85a7..18d26fb 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
 	import IconButton from "$lib/components/kit/IconButton.svelte";
 	import PageGrid from "$lib/components/kit/layout/PageGrid.svelte";
@@ -14,6 +13,7 @@
 	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
+	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import {
 		ChevronDown,
 		Plus,
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index a532d57..2a9f4ff 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -3,7 +3,6 @@
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
 	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
 	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import IconButton from "$lib/components/kit/IconButton.svelte";
 	import ImageCard from "$lib/components/kit/ImageCard.svelte";
@@ -23,6 +22,7 @@
 	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 DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");
diff --git a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
index 6fd31c2..d401789 100644
--- a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import Dropzone from "$lib/components/kit/Dropzone.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
@@ -10,6 +9,7 @@
 	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 DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import type { PixelImage } from "$lib/core/types";
 
 	interface PreviewItem {