diff --git a/web/src/lib/components/kit/Badge.svelte b/web/src/lib/components/kit/Badge.svelte
deleted file mode 100644
index 8743de2..0000000
--- a/web/src/lib/components/kit/Badge.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { Check } from "@lucide/svelte";
-	import type { Snippet } from "svelte";
-
-	type Tone = "default" | "accent" | "success" | "amber";
-
-	interface Props {
-		tone?: Tone;
-		check?: boolean;
-		children: Snippet;
-	}
-	let { tone = "default", check = false, children }: Props = $props();
-</script>
-
-<span class="badge badge--{tone}">
-	{#if check}<Check size={12} />{/if}
-	{#if children}{@render children()}{/if}
-</span>
-
-<style>
-	.badge {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		line-height: normal;
-		font-family: var(--font-mono);
-		font-size: 10px;
-		border: 0px solid var(--line);
-		color: var(--muted);
-	}
-	.badge--accent {
-		color: var(--blue);
-		border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
-	}
-	.badge--success {
-		color: var(--success);
-		border-color: color-mix(in srgb, var(--success) 40%, var(--line));
-	}
-	.badge--amber {
-		color: var(--amber);
-		border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
-	}
-</style>
diff --git a/web/src/lib/components/kit/ui/Badge.svelte b/web/src/lib/components/kit/ui/Badge.svelte
new file mode 100644
index 0000000..ce64154
--- /dev/null
+++ b/web/src/lib/components/kit/ui/Badge.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Check } from "@lucide/svelte";
+
+	const ToneVariantDefine = {
+		DEFAULT: "default",
+		ACCENT: "accent",
+		SUCCESS: "success",
+		WARNING: "warning",
+		DANGER: "danger",
+		INFO: "info",
+	} as const;
+	type ToneVariant = (typeof ToneVariantDefine)[keyof typeof ToneVariantDefine];
+
+	const BadgeVariantDefine = {
+		DEFAULT: "default",
+		OUTLINE: "outline",
+		CLEAR: "clear",
+	} as const;
+	type BadgeVariant =
+		(typeof BadgeVariantDefine)[keyof typeof BadgeVariantDefine];
+
+	interface Props {
+		tone?: ToneVariant;
+		variant?: BadgeVariant;
+		check?: boolean;
+		label?: string;
+	}
+
+	let {
+		tone = ToneVariantDefine.DEFAULT,
+		variant = BadgeVariantDefine.DEFAULT,
+		check = false,
+		label = "",
+	}: Props = $props();
+</script>
+
+<span class="badge badge-tone--{tone} badge-variant--{variant}">
+	{#if check}<Check size={12} />{/if}
+	{label}
+</span>
+
+<style>
+	.badge {
+		display: flex;
+		align-items: center;
+		gap: var(--space-s);
+		line-height: normal;
+		font-family: var(--font-mono);
+		font-size: var(--font-text);
+		font-weight: bold;
+		border-width: var(--size-border-thick);
+		padding: var(--space-s) var(--space-m);
+	}
+
+	.badge-tone--default {
+		--color-badge-main: var(--color-main);
+		--color-badge-tint: var(--color-main-tint);
+	}
+	.badge-tone--accent {
+		--color-badge-main: var(--color-accent);
+		--color-badge-tint: var(--color-accent-tint);
+	}
+	.badge-tone--success {
+		--color-badge-main: var(--color-success);
+		--color-badge-tint: var(--color-success-tint);
+	}
+	.badge-tone--danger {
+		--color-badge-main: var(--color-danger);
+		--color-badge-tint: var(--color-danger-tint);
+	}
+	.badge-tone--warning {
+		--color-badge-main: var(--color-warning);
+		--color-badge-tint: var(--color-warning-tint);
+	}
+	.badge-tone--info {
+		--color-badge-main: var(--color-info);
+		--color-badge-tint: var(--color-info-tint);
+	}
+
+	.badge-variant--default {
+		background-color: var(--color-badge-main);
+		border-color: var(--color-badge-main);
+		color: var(--color-background);
+	}
+
+	.badge-variant--outline {
+		background-color: transparent;
+		border-color: var(--color-badge-tint);
+		color: var(--color-badge-tint);
+	}
+
+	.badge-variant--clear {
+		background-color: transparent;
+		border-color: transparent;
+		color: var(--color-badge-tint);
+	}
+</style>
diff --git a/web/src/preview.css b/web/src/preview.css
index dd34ce6..e965f93 100644
--- a/web/src/preview.css
+++ b/web/src/preview.css
@@ -1,19 +1,13 @@
-@import "@fontsource/ibm-plex-sans/400.css";
-@import "@fontsource/ibm-plex-sans/500.css";
-@import "@fontsource/ibm-plex-sans/600.css";
-@import "@fontsource/ibm-plex-sans/700.css";
-@import "@fontsource/ibm-plex-mono/400.css";
-@import "@fontsource/ibm-plex-mono/500.css";
+@import url("@fontsource/ibm-plex-sans/400.css");
+@import url("@fontsource/ibm-plex-sans/500.css");
+@import url("@fontsource/ibm-plex-sans/600.css");
+@import url("@fontsource/ibm-plex-sans/700.css");
+@import url("@fontsource/ibm-plex-mono/400.css");
+@import url("@fontsource/ibm-plex-mono/500.css");
 
-/* Порядок cascade-слоёв (дубль из корневого +layout.svelte — идемпотентен и
-   страхует случай, когда design2.css грузится раньше корневого layout): */
 @layer app, design;
 
-/* Новый дизайн — слой design. В слое design правила выигрывают у того же
-   правила из слоя app (старый app.css) по слою, а не по порядку <link>,
-   поэтому утечка app.css на /preview при SPA-переходе не перебивает design2. */
 @layer design {
-	/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
 	*,
 	*::before,
 	*::after,
@@ -25,7 +19,7 @@
 	}
 
 	* {
-		border-color: var(--line);
+		border-color: var(--color-border);
 	}
 
 	html,
@@ -34,21 +28,19 @@
 		padding: 0;
 	}
 
-	/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
-	   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
 	html {
 		color-scheme: light dark;
 		font-family: var(--font-sans);
-		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
 		line-height: 1.5;
 	}
 
 	body {
 		font-family: var(--font-sans);
-		color: var(--foreground);
-		background: var(--background);
+		color: var(--color-text);
+		background: var(--color-background);
 		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
+		text-rendering: optimizelegibility;
 	}
 
 	button,
@@ -68,77 +60,112 @@
 
 	button,
 	input:where([type="button"], [type="reset"], [type="submit"]) {
-		appearance: button;
+		appearance: auto;
 	}
 
-	/* Перебивки глобальных правил старого app.css (слой app ниже), чтобы при
-	   утечке app.css на /preview новый дизайн не получал старую типографику.
-	   Пустые — заполни при необходимости. */
 	a,
 	a:hover {
 		color: inherit;
 		text-decoration: none;
 	}
+
 	h1,
 	h2 {
 		font-size: revert;
 		line-height: revert;
 		letter-spacing: revert;
 	}
+
 	p,
 	label {
 		font-size: revert;
 	}
+
 	:focus-visible {
 		outline: revert;
 	}
+
 	svg {
 		vertical-align: middle;
 	}
 
-	/* Новый дизайн: токены (§2 плана redesign).
-	   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
-	   глобально не конфликтует со старым app.css. */
-
 	:root {
 		--font-sans: "IBM Plex Sans", sans-serif;
 		--font-mono: "IBM Plex Mono", monospace;
 
-		--background: #eef1f4;
-		--background-muted: #dce2e7;
-		--checker-background: #e4e8eb;
-		--checker-background-cross: #d2d8dc;
+		--brand-main: #86efac;
+		--brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
 
-		--panel: #f8fafb;
-		--foreground: #17212b;
-		--muted: #6d7883;
-		--line: #cbd3da;
+		--color-background: hct(from var(--brand-main) h 8 95);
+		--color-background-muted: hct(from var(--brand-main) h 12 85);
+		--color-panel: hct(from var(--brand-main) h 6.5 98);
+		--color-checker-main: hct(from var(--brand-main) h 10.7 85.7);
+		--color-checker-alt: hct(from var(--brand-main) h 13.2 76);
 
-		--blue: #1769d2;
-		--cyan: #00a8c7;
-		--amber: #bd7411;
-		--success: rgb(35, 131, 84);
-		--success2: rgb(37, 169, 106);
-		--danger: #e5484d;
+		--color-border: hct(from var(--brand-main) h 13.1 69.4);
 
-		--radius: 4px;
+		--color-text: hct(from var(--brand-main) h 5.9 1.7);
+		--color-text-muted: hct(from var(--brand-main) h 13.4 19.2);
+		--color-text-accent: hct(from var(--brand-alt) h 5.9 1.7);
+		--color-text-accent-muted: hct(from var(--brand-alt) h 13.4 19.2);
+
+		--color-main: hct(from var(--brand-main) h 80 48);
+		--color-accent: hct(from var(--brand-alt) h 80 48);
+		--color-success: hct(160 80 48);
+		--color-warning: hct(80 80 48);
+		--color-danger: hct(30 80 48);
+		--color-info: hct(340 80 48);
+
+		--color-main-tint: hct(from var(--brand-main) h 65 55);
+		--color-accent-tint: hct(from var(--brand-alt) h 65 55);
+		--color-success-tint: hct(160 65 55);
+		--color-warning-tint: hct(80 65 55);
+		--color-danger-tint: hct(30 65 55);
+		--color-info-tint: hct(340 65 55);
+
+		--space-s: 4px;
+		--space-m: 8px;
+		--space-l: 12px;
+		--space-xl: 12px;
+
+		--size-border: 1px;
+		--size-border-thick: 2px;
+
+		--font-text: 10px;
+
+		--radius-s: 0px;
+		--radius-m: 4px;
 	}
 
 	[data-theme="dark"] {
-		--background: #11171d;
-		--background-muted: #1e2a3447;
-		--checker-background: #202a31;
-		--checker-background-cross: #29343c;
+		--brand-main: #86efac;
+		--brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
 
-		--panel: #182129;
-		--foreground: #e8eef2;
-		--muted: #91a0ac;
-		--line: #33414c;
+		--color-background: hct(from var(--brand-main) h 15 6);
+		--color-background-muted: hct(from var(--brand-main) h 15 10);
+		--color-panel: hct(from var(--brand-main) h 12 8);
+		--color-checker-main: hct(from var(--brand-main) h 12 10);
+		--color-checker-alt: hct(from var(--brand-main) h 14 14);
 
-		--blue: #54a2ff;
-		--cyan: #00a8c7;
-		--amber: #bd7411;
-		--success: #25a96a;
-		--danger: #ff7479;
+		--color-border: hct(from var(--brand-main) h 15 25);
+
+		--color-text: hct(from var(--brand-main) h 25 90);
+		--color-text-muted: hct(from var(--brand-main) h 22 70);
+		--color-text-accent: hct(from var(--brand-alt) h 25 90);
+		--color-text-accent-muted: hct(from var(--brand-alt) h 22 70);
+
+		--color-main: hct(from var(--brand-main) h 60 50);
+		--color-accent: hct(from var(--brand-alt) h 60 50);
+		--color-success: hct(160 65 55);
+		--color-warning: hct(80 65 55);
+		--color-danger: hct(30 70 55);
+		--color-info: hct(340 65 55);
+
+		--color-main-tint: hct(from var(--brand-main) h 45 57);
+		--color-accent-tint: hct(from var(--brand-alt) h 45 57);
+		--color-success-tint: hct(160 50 60);
+		--color-warning-tint: hct(80 50 60);
+		--color-danger-tint: hct(30 50 60);
+		--color-info-tint: hct(340 50 60);
 	}
 }
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index bc17d52..29d85a7 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Badge from "$lib/components/kit/Badge.svelte";
 	import ColorField from "$lib/components/kit/ColorField.svelte";
 	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
@@ -14,6 +13,7 @@
 	import SliderField from "$lib/components/kit/SliderField.svelte";
 	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 {
 		ChevronDown,
 		Plus,
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 7998a7a..3e343c6 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 Badge from "$lib/components/kit/Badge.svelte";
 	import Button from "$lib/components/kit/Button.svelte";
 	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
@@ -23,6 +22,7 @@
 	import TextField from "$lib/components/kit/TextField.svelte";
 	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 { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");
diff --git a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
index 087eff0..033b731 100644
--- a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { getTool } 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 StepCard from "$lib/components/kit/StepCard.svelte";
-	import Badge from "$lib/components/kit/Badge.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
 	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";
+	import SelectField from "$lib/components/kit/SelectField.svelte";
+	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 { getTool } from "$lib/registry";
 	import ParamControl from "./ParamControl.svelte";
 
 	type ParamValue = string | number | boolean;