From 2d24f51fd5bf94408f1ec515575fc700bfd74ae3 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 8 Sep 2026 07:02:54 +0500
Subject: [PATCH] refactor: fix lint css vars rules

---
 .../lib/components/kit/CatalogGroup.svelte    | 22 ++++-----
 .../lib/components/kit/CatalogHeader.svelte   | 32 ++++++-------
 .../lib/components/kit/CatalogToolbar.svelte  | 46 +++++++++----------
 .../lib/components/kit/CheckerCanvas.svelte   |  8 ++--
 web/src/lib/components/kit/CodeBlock.svelte   | 20 ++++----
 web/src/lib/components/kit/Dropzone.svelte    | 30 ++++++------
 web/src/lib/components/kit/EmptyState.svelte  | 14 +++---
 web/src/lib/components/kit/ImageCard.svelte   | 12 ++---
 web/src/lib/components/kit/MetaList.svelte    |  6 +--
 web/src/lib/components/kit/MetaRow.svelte     | 12 ++---
 .../lib/components/kit/PanelHeading.svelte    | 12 ++---
 .../lib/components/kit/SchemaPreview.svelte   |  2 +-
 .../lib/components/kit/SchemaToolView.svelte  |  2 +-
 .../lib/components/kit/SettingGroup.svelte    |  8 ++--
 .../lib/components/kit/SettingsFooter.svelte  |  6 +--
 web/src/lib/components/kit/StatusDot.svelte   |  6 +--
 web/src/lib/components/kit/StatusLine.svelte  |  2 +-
 web/src/lib/components/kit/StepCard.svelte    | 42 ++++++++---------
 web/src/lib/components/kit/ToolCard.svelte    | 40 ++++++++--------
 .../kit/fields/CheckboxField.svelte           |  8 ++--
 .../components/kit/fields/ColorField.svelte   | 32 ++++++-------
 .../components/kit/fields/SelectField.svelte  | 12 ++---
 .../components/kit/fields/SliderField.svelte  | 16 +++----
 .../components/kit/fields/TextField.svelte    | 14 +++---
 .../lib/components/kit/ui/LangToggle.svelte   | 14 +++---
 web/src/lib/components/kit/ui/Toggle.svelte   | 14 +++---
 web/src/preview.css                           | 10 ++++
 web/src/routes/preview/+layout.svelte         | 17 ++-----
 web/src/routes/preview/+page.svelte           | 30 ++++++------
 web/src/routes/preview/kit/+page.svelte       | 20 ++++----
 .../routes/preview/list-tools/+page.svelte    | 20 ++++----
 .../routes/preview/tools/[id]/+page.svelte    |  6 ++-
 32 files changed, 270 insertions(+), 265 deletions(-)

diff --git a/web/src/lib/components/kit/CatalogGroup.svelte b/web/src/lib/components/kit/CatalogGroup.svelte
index 414610f..90deefc 100644
--- a/web/src/lib/components/kit/CatalogGroup.svelte
+++ b/web/src/lib/components/kit/CatalogGroup.svelte
@@ -23,29 +23,29 @@
 	.catalog-group {
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
+		gap: var(--space-xl);
 	}
 	.group-title {
 		display: flex;
 		align-items: baseline;
 		justify-content: space-between;
-		gap: 1rem;
-		padding-bottom: 0.5rem;
-		border-bottom: 1px solid var(--line);
+		gap: var(--space-xl);
+		padding-bottom: var(--space-m);
+		border-bottom: 1px solid var(--color-border);
 	}
 	.group-title span {
-		font: 12px var(--font-mono);
-		letter-spacing: 0.14em;
-		color: var(--foreground);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-xl);
+		color: var(--color-text);
 	}
 	.group-title i {
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
 		font-style: normal;
-		letter-spacing: 0.08em;
-		color: var(--muted);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
 	}
 	.tool-cards {
 		display: grid;
-		gap: 10px;
+		gap: var(--space-m);
 	}
 </style>
diff --git a/web/src/lib/components/kit/CatalogHeader.svelte b/web/src/lib/components/kit/CatalogHeader.svelte
index 017c722..18c8eee 100644
--- a/web/src/lib/components/kit/CatalogHeader.svelte
+++ b/web/src/lib/components/kit/CatalogHeader.svelte
@@ -25,26 +25,26 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-end;
-		gap: 1.5rem;
+		gap: var(--space-xxl);
 		flex-wrap: wrap;
 	}
 	.eyebrow {
-		font: 12px var(--font-mono);
-		letter-spacing: 0.18em;
-		color: var(--muted);
-		margin-bottom: 0.5rem;
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-xl);
+		color: var(--color-text-muted);
+		margin-bottom: var(--space-m);
 	}
 	h1 {
 		margin: 0;
-		font-size: 2rem;
+		font-size: var(--font-size-2xl);
 		font-weight: 700;
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	p {
-		margin: 0.5rem 0 0;
+		margin: var(--space-m) 0 0;
 		max-width: 56ch;
-		color: var(--muted);
-		font-size: 0.95rem;
+		color: var(--color-text-muted);
+		font-size: var(--font-size-m);
 	}
 	.catalog-total {
 		display: flex;
@@ -53,14 +53,14 @@
 		line-height: 1;
 	}
 	.catalog-total b {
-		font: 700 2rem var(--font-mono);
-		color: var(--foreground);
+		font: 700 var(--font-size-2xl) var(--font-mono);
+		color: var(--color-text);
 	}
 	.catalog-total span {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		color: var(--muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
 		text-align: right;
-		margin-top: 0.35rem;
+		margin-top: var(--space-s);
 	}
 </style>
diff --git a/web/src/lib/components/kit/CatalogToolbar.svelte b/web/src/lib/components/kit/CatalogToolbar.svelte
index c0820e3..beb60da 100644
--- a/web/src/lib/components/kit/CatalogToolbar.svelte
+++ b/web/src/lib/components/kit/CatalogToolbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Search, Filter } from "@lucide/svelte";
+	import { Filter, Search } from "@lucide/svelte";
 
 	interface Props {
 		query: string;
@@ -46,50 +46,50 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
+		gap: var(--space-xl);
 		flex-wrap: wrap;
-		padding: 1.25rem 0;
+		padding: var(--space-xl) 0;
 	}
 	.catalog-search {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: var(--panel);
-		color: var(--muted);
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-l);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		background: var(--color-panel);
+		color: var(--color-text-muted);
 	}
 	.catalog-search input {
 		border: none;
 		background: transparent;
 		outline: none;
-		color: var(--foreground);
-		font: 12px var(--font-mono);
+		color: var(--color-text);
+		font: var(--font-size-s) var(--font-mono);
 	}
 	.catalog-search input::placeholder {
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.catalog-filters {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.4rem;
+		gap: var(--space-s);
 		flex-wrap: wrap;
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.catalog-filters button {
-		border: 1px solid var(--line);
+		border: 1px solid var(--color-border);
 		background: transparent;
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		letter-spacing: 0.06em;
-		padding: 0.4rem 0.6rem;
-		border-radius: var(--radius);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-m);
+		padding: var(--space-s) var(--space-m);
+		border-radius: var(--radius-m);
 		cursor: pointer;
 	}
 	.catalog-filters button.active {
-		background: var(--blue);
-		color: #fff;
-		border-color: var(--blue);
+		background: var(--color-main);
+		color: var(--color-background);
+		border-color: var(--color-main);
 	}
 </style>
diff --git a/web/src/lib/components/kit/CheckerCanvas.svelte b/web/src/lib/components/kit/CheckerCanvas.svelte
index 1151d89..ad2b755 100644
--- a/web/src/lib/components/kit/CheckerCanvas.svelte
+++ b/web/src/lib/components/kit/CheckerCanvas.svelte
@@ -20,13 +20,13 @@
 		display: grid;
 		place-items: center;
 		overflow: hidden;
-		background-color: #0b0f14;
+		background-color: var(--color-text);
 		background-image:
 			linear-gradient(45deg, #1a2129 25%, transparent 25%),
 			linear-gradient(-45deg, #1a2129 25%, transparent 25%),
 			linear-gradient(45deg, transparent 75%, #1a2129 75%),
 			linear-gradient(-45deg, transparent 75%, #1a2129 75%);
-		background-size: 20px 20px;
+		background-size: var(--space-xl) var(--space-xl);
 		background-position:
 			0 0,
 			0 10px,
@@ -35,10 +35,10 @@
 	}
 
 	.checker-canvas--sm {
-		min-height: 180px;
+		min-height: var(--size-preview-canvas-min-height-s);
 	}
 
 	.checker-canvas--large {
-		min-height: 360px;
+		min-height: var(--size-preview-canvas-min-height-l);
 	}
 </style>
diff --git a/web/src/lib/components/kit/CodeBlock.svelte b/web/src/lib/components/kit/CodeBlock.svelte
index 52a392d..6f2fee9 100644
--- a/web/src/lib/components/kit/CodeBlock.svelte
+++ b/web/src/lib/components/kit/CodeBlock.svelte
@@ -24,27 +24,27 @@
 <style>
 	.code-block {
 		position: relative;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: var(--background);
-		padding: 0.6rem 0.8rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		background: var(--color-background);
+		padding: var(--space-m) var(--space-l);
 	}
 	.code-lang {
 		font-family: var(--font-mono);
-		font-size: 10px;
+		font-size: var(--font-size-s);
 		text-transform: uppercase;
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.code-pre {
 		margin: 0;
 		overflow: auto;
 		font-family: var(--font-mono);
-		font-size: 11px;
-		color: var(--foreground);
+		font-size: var(--font-size-s);
+		color: var(--color-text);
 	}
 	.code-copy {
 		position: absolute;
-		top: 0.4rem;
-		right: 0.4rem;
+		top: var(--space-s);
+		right: var(--space-s);
 	}
 </style>
diff --git a/web/src/lib/components/kit/Dropzone.svelte b/web/src/lib/components/kit/Dropzone.svelte
index 95351c3..7717097 100644
--- a/web/src/lib/components/kit/Dropzone.svelte
+++ b/web/src/lib/components/kit/Dropzone.svelte
@@ -63,32 +63,32 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
-		min-height: 220px;
-		padding: 2rem;
-		border: 1px dashed var(--line);
-		border-radius: var(--radius);
-		color: var(--muted);
-		background: var(--background);
+		gap: var(--space-m);
+		min-height: var(--size-panel-min-height);
+		padding: var(--space-xxxl);
+		border: 1px dashed var(--color-border);
+		border-radius: var(--radius-m);
+		color: var(--color-text-muted);
+		background: var(--color-background);
 		cursor: pointer;
 		text-align: center;
 		transition:
-			border-color 0.15s ease,
-			background 0.15s ease;
+			border-color var(--duration-m) ease,
+			background var(--duration-m) ease;
 	}
 	.dropzone:hover,
 	.dropzone:focus-visible,
 	.dropzone.dragging {
-		border-color: var(--blue);
-		color: var(--foreground);
+		border-color: var(--color-main);
+		color: var(--color-text);
 		outline: none;
 	}
 	.dz-title {
-		font: 600 0.9rem var(--font-mono);
-		color: var(--foreground);
+		font: 600 var(--font-size-m) var(--font-mono);
+		color: var(--color-text);
 	}
 	.dz-sub {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.04em;
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-m);
 	}
 </style>
diff --git a/web/src/lib/components/kit/EmptyState.svelte b/web/src/lib/components/kit/EmptyState.svelte
index 328a7e2..375b988 100644
--- a/web/src/lib/components/kit/EmptyState.svelte
+++ b/web/src/lib/components/kit/EmptyState.svelte
@@ -23,20 +23,20 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 2rem 1rem;
+		gap: var(--space-m);
+		padding: var(--space-xxxl) var(--space-xl);
 		text-align: center;
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.empty-icon {
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.empty-title {
-		color: var(--foreground);
-		font-size: 0.95rem;
+		color: var(--color-text);
+		font-size: var(--font-size-m);
 	}
 	.empty-desc {
-		font-size: 0.8rem;
+		font-size: var(--font-size-s);
 		max-width: 32ch;
 	}
 </style>
diff --git a/web/src/lib/components/kit/ImageCard.svelte b/web/src/lib/components/kit/ImageCard.svelte
index d96fc56..0d17983 100644
--- a/web/src/lib/components/kit/ImageCard.svelte
+++ b/web/src/lib/components/kit/ImageCard.svelte
@@ -18,15 +18,15 @@
 	.image-card {
 		display: flex;
 		flex-direction: column;
-		gap: 0.4rem;
+		gap: var(--space-s);
 		margin: 0;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		padding: 0.6rem;
-		background: var(--panel);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		padding: var(--space-m);
+		background: var(--color-panel);
 	}
 	.image-canvas {
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
 		overflow: hidden;
 	}
 </style>
diff --git a/web/src/lib/components/kit/MetaList.svelte b/web/src/lib/components/kit/MetaList.svelte
index e6204c2..77fe52f 100644
--- a/web/src/lib/components/kit/MetaList.svelte
+++ b/web/src/lib/components/kit/MetaList.svelte
@@ -15,10 +15,10 @@
 
 <style>
 	.meta-list {
-		border-top: 1px solid var(--line);
+		border-top: 1px solid var(--color-border);
 		grid-template-columns: repeat(3, 1fr);
-		gap: 8px;
-		padding-top: 14px;
+		gap: var(--space-m);
+		padding-top: var(--space-l);
 		display: grid;
 	}
 </style>
diff --git a/web/src/lib/components/kit/MetaRow.svelte b/web/src/lib/components/kit/MetaRow.svelte
index 8e3b483..46224fe 100644
--- a/web/src/lib/components/kit/MetaRow.svelte
+++ b/web/src/lib/components/kit/MetaRow.svelte
@@ -13,19 +13,19 @@
 
 <style>
 	.meta-row {
-		gap: 5px;
+		gap: var(--space-s);
 		display: grid;
 	}
 	.meta-caption {
 		font-family: var(--font-mono);
-		font-size: 9px;
-		color: var(--muted);
+		font-size: var(--font-size-s);
+		color: var(--color-text-muted);
 		line-height: normal;
 	}
 	.meta-value {
-		margin-top: 5px;
+		margin-top: var(--space-s);
 		line-height: normal;
-		font: 11px var(--font-mono);
-		color: var(--foreground);
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text);
 	}
 </style>
diff --git a/web/src/lib/components/kit/PanelHeading.svelte b/web/src/lib/components/kit/PanelHeading.svelte
index 2f421ad..a08127c 100644
--- a/web/src/lib/components/kit/PanelHeading.svelte
+++ b/web/src/lib/components/kit/PanelHeading.svelte
@@ -23,18 +23,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
-		padding: 0.75rem 1rem;
-		border-bottom: 1px solid var(--line);
+		gap: var(--space-xl);
+		padding: var(--space-l) var(--space-xl);
+		border-bottom: 1px solid var(--color-border);
 	}
 	.heading-text {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: var(--space-s);
 	}
 	.heading-title {
-		font-size: 0.95rem;
+		font-size: var(--font-size-m);
 		font-weight: 600;
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 </style>
diff --git a/web/src/lib/components/kit/SchemaPreview.svelte b/web/src/lib/components/kit/SchemaPreview.svelte
index e188f29..7acf0cc 100644
--- a/web/src/lib/components/kit/SchemaPreview.svelte
+++ b/web/src/lib/components/kit/SchemaPreview.svelte
@@ -139,7 +139,7 @@
 	.meta {
 		margin-top: var(--space-l);
 	}
-	@media (max-width: var(--bp-tablet)) {
+	@media (--bp-tablet) {
 		.pair {
 			grid-template-columns: 1fr;
 		}
diff --git a/web/src/lib/components/kit/SchemaToolView.svelte b/web/src/lib/components/kit/SchemaToolView.svelte
index 7013f2a..b0199e6 100644
--- a/web/src/lib/components/kit/SchemaToolView.svelte
+++ b/web/src/lib/components/kit/SchemaToolView.svelte
@@ -293,7 +293,7 @@
 	.no-schema {
 		font: var(--font-size-s) var(--font-mono);
 	}
-	@media (max-width: var(--bp-tablet)) {
+	@media (--bp-tablet) {
 		.workspace {
 			grid-template-columns: 1fr;
 		}
diff --git a/web/src/lib/components/kit/SettingGroup.svelte b/web/src/lib/components/kit/SettingGroup.svelte
index fb01942..ffe938c 100644
--- a/web/src/lib/components/kit/SettingGroup.svelte
+++ b/web/src/lib/components/kit/SettingGroup.svelte
@@ -19,13 +19,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
-		padding: 0.6rem 1rem;
-		border-bottom: 1px solid var(--line);
+		gap: var(--space-xl);
+		padding: var(--space-m) var(--space-xl);
+		border-bottom: 1px solid var(--color-border);
 	}
 	.setting-control {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
 	}
 </style>
diff --git a/web/src/lib/components/kit/SettingsFooter.svelte b/web/src/lib/components/kit/SettingsFooter.svelte
index be3bdac..b8ef2bf 100644
--- a/web/src/lib/components/kit/SettingsFooter.svelte
+++ b/web/src/lib/components/kit/SettingsFooter.svelte
@@ -14,8 +14,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
-		gap: 0.5rem;
-		padding: 0.75rem 1rem;
-		border-top: 1px solid var(--line);
+		gap: var(--space-m);
+		padding: var(--space-l) var(--space-xl);
+		border-top: 1px solid var(--color-border);
 	}
 </style>
diff --git a/web/src/lib/components/kit/StatusDot.svelte b/web/src/lib/components/kit/StatusDot.svelte
index e873e20..873a4f8 100644
--- a/web/src/lib/components/kit/StatusDot.svelte
+++ b/web/src/lib/components/kit/StatusDot.svelte
@@ -2,9 +2,9 @@
 
 <style>
 	.status-dot {
-		width: 6px;
-		height: 6px;
+		width: var(--space-s);
+		height: var(--space-s);
 		border-radius: 50%;
-		background-color: var(--success2);
+		background-color: var(--color-success);
 	}
 </style>
diff --git a/web/src/lib/components/kit/StatusLine.svelte b/web/src/lib/components/kit/StatusLine.svelte
index a17c2f2..572fcb0 100644
--- a/web/src/lib/components/kit/StatusLine.svelte
+++ b/web/src/lib/components/kit/StatusLine.svelte
@@ -18,6 +18,6 @@
 	.status-line {
 		display: inline-flex;
 		align-items: center;
-		gap: 6px;
+		gap: var(--space-s);
 	}
 </style>
diff --git a/web/src/lib/components/kit/StepCard.svelte b/web/src/lib/components/kit/StepCard.svelte
index 4b7304b..7de116d 100644
--- a/web/src/lib/components/kit/StepCard.svelte
+++ b/web/src/lib/components/kit/StepCard.svelte
@@ -46,44 +46,44 @@
 	.step-card {
 		display: grid;
 		grid-template-columns: 46px 20px 1fr;
-		min-height: 138px;
-		border: 1px solid var(--line);
-		background: var(--panel);
+		min-height: var(--size-step-min-height);
+		border: 1px solid var(--color-border);
+		background: var(--color-panel);
 	}
 	.step-index {
-		font: 11px var(--font-mono);
-		color: var(--blue);
-		padding: 17px 0 0px 15px;
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-main);
+		padding: var(--space-xl) 0 0px var(--space-xl);
 	}
 	.step-body {
-		padding: 15px 18px 18px;
+		padding: var(--space-xl) var(--space-xl) var(--space-xl);
 	}
 	.step-heading {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 15px;
-		border-color: var(--line);
+		gap: var(--space-xl);
+		border-color: var(--color-border);
 	}
 	.step-type {
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		letter-spacing: 0.12em;
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-xl);
 	}
 	.step-title {
-		margin: 5px 0 18px;
-		font: 600 15px var(--font-mono);
-		color: var(--foreground);
+		margin: var(--space-s) 0 var(--space-xl);
+		font: 600 var(--font-size-m) var(--font-mono);
+		color: var(--color-text);
 	}
 	.step-tools {
 		display: flex;
 		align-items: center;
-		gap: 13px;
+		gap: var(--space-l);
 	}
 	.step-remove {
 		border: 0;
 		background: transparent;
-		color: var(--muted);
+		color: var(--color-text-muted);
 		cursor: pointer;
 		line-height: inherit;
 		& :global(svg) {
@@ -92,13 +92,13 @@
 		}
 	}
 	.step-card :global(.drag) {
-		margin-top: 17px;
-		color: var(--line);
+		margin-top: var(--space-xl);
+		color: var(--color-border);
 	}
 	.step-remove:hover {
-		color: var(--danger);
+		color: var(--color-danger);
 	}
 	.step-body > :not(.step-heading) {
-		padding: 0.75rem;
+		padding: var(--space-l);
 	}
 </style>
diff --git a/web/src/lib/components/kit/ToolCard.svelte b/web/src/lib/components/kit/ToolCard.svelte
index 0858635..52c023a 100644
--- a/web/src/lib/components/kit/ToolCard.svelte
+++ b/web/src/lib/components/kit/ToolCard.svelte
@@ -29,46 +29,46 @@
 <style>
 	.tool-card {
 		display: grid;
-		grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
+		grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) 24px 18px;
 		align-items: center;
-		gap: 14px;
-		min-height: 106px;
-		padding: 16px;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: var(--panel);
-		color: var(--foreground);
+		gap: var(--space-l);
+		min-height: var(--size-tool-min-height);
+		padding: var(--space-xl);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		background: var(--color-panel);
+		color: var(--color-text);
 		text-decoration: none;
 	}
 	.tool-card:hover {
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 	.tool-icon {
-		width: 42px;
-		height: 42px;
+		width: var(--size-tool-icon);
+		height: var(--size-tool-icon);
 		display: grid;
 		place-items: center;
-		background: color-mix(in srgb, var(--blue) 12%, transparent);
-		color: var(--blue);
-		border-radius: var(--radius);
+		background: var(--color-main-soft);
+		color: var(--color-main);
+		border-radius: var(--radius-m);
 	}
 	.tool-copy {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+		gap: var(--space-s);
 		min-width: 0;
 	}
 	.tool-copy strong {
-		font: 600 13px var(--font-mono);
-		color: var(--foreground);
+		font: 600 var(--font-size-s) var(--font-mono);
+		color: var(--color-text);
 	}
 	.tool-copy span {
 		font: 12px/1.5 var(--font-mono);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.tool-index {
-		font: 10px var(--font-mono);
-		color: var(--muted);
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text-muted);
 		align-self: start;
 	}
 </style>
diff --git a/web/src/lib/components/kit/fields/CheckboxField.svelte b/web/src/lib/components/kit/fields/CheckboxField.svelte
index 57f17dd..aee6200 100644
--- a/web/src/lib/components/kit/fields/CheckboxField.svelte
+++ b/web/src/lib/components/kit/fields/CheckboxField.svelte
@@ -21,12 +21,12 @@
 	.checkbox-field {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.85rem;
-		color: var(--foreground);
+		gap: var(--space-m);
+		font-size: var(--font-size-m);
+		color: var(--color-text);
 		cursor: pointer;
 	}
 	.checkbox-field input {
-		accent-color: var(--blue);
+		accent-color: var(--color-main);
 	}
 </style>
diff --git a/web/src/lib/components/kit/fields/ColorField.svelte b/web/src/lib/components/kit/fields/ColorField.svelte
index b67f502..d4c11cc 100644
--- a/web/src/lib/components/kit/fields/ColorField.svelte
+++ b/web/src/lib/components/kit/fields/ColorField.svelte
@@ -39,42 +39,42 @@
 
 <style>
 	.control-block :global(.icon) {
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.control-title {
 		display: flex;
 		justify-content: space-between;
-		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		color: var(--muted);
-		margin-bottom: 8px;
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
+		margin-bottom: var(--space-m);
 	}
 	.color-field {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-		padding-left: 8px;
-		padding-right: 8px;
-		height: 32px;
-		border: 1px solid var(--line);
+		gap: var(--space-m);
+		padding-left: var(--space-m);
+		padding-right: var(--space-m);
+		height: var(--space-xxxl);
+		border: 1px solid var(--color-border);
 	}
 	.swatch {
-		width: 14px;
-		height: 14px;
-		border: 1px solid var(--line);
+		width: var(--space-l);
+		height: var(--space-l);
+		border: 1px solid var(--color-border);
 		flex: none;
 	}
 	.color-field input {
 		min-width: 0;
-		color: var(--foreground);
-		font: 11px var(--font-mono);
+		color: var(--color-text);
+		font: var(--font-size-s) var(--font-mono);
 		background: 0 0;
 		border: 0;
 		outline: 0;
 		flex: 1;
 	}
 	.color-field :global(svg) {
-		color: var(--muted);
+		color: var(--color-text-muted);
 		flex: none;
 	}
 </style>
diff --git a/web/src/lib/components/kit/fields/SelectField.svelte b/web/src/lib/components/kit/fields/SelectField.svelte
index 1995251..8f8ac0c 100644
--- a/web/src/lib/components/kit/fields/SelectField.svelte
+++ b/web/src/lib/components/kit/fields/SelectField.svelte
@@ -32,11 +32,11 @@
 	.select-field {
 		width: 100%;
 		font-family: var(--font-mono);
-		font-size: 11px;
-		color: var(--foreground);
-		background: var(--background);
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		padding: 0.35rem 0.5rem;
+		font-size: var(--font-size-s);
+		color: var(--color-text);
+		background: var(--color-background);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		padding: var(--space-s) var(--space-m);
 	}
 </style>
diff --git a/web/src/lib/components/kit/fields/SliderField.svelte b/web/src/lib/components/kit/fields/SliderField.svelte
index e65c894..7cb979a 100644
--- a/web/src/lib/components/kit/fields/SliderField.svelte
+++ b/web/src/lib/components/kit/fields/SliderField.svelte
@@ -33,19 +33,19 @@
 	label {
 		display: flex;
 		justify-content: space-between;
-		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		color: var(--muted);
-		margin-bottom: 8px;
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
+		margin-bottom: var(--space-m);
 	}
 	output {
-		font: 10px var(--font-mono);
-		color: var(--foreground);
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text);
 	}
 	input[type="range"] {
-		color: var(--foreground);
+		color: var(--color-text);
 		line-height: inherit;
 		width: 100%;
-		accent-color: var(--blue);
+		accent-color: var(--color-main);
 	}
 </style>
diff --git a/web/src/lib/components/kit/fields/TextField.svelte b/web/src/lib/components/kit/fields/TextField.svelte
index d92d3e4..fdc2e26 100644
--- a/web/src/lib/components/kit/fields/TextField.svelte
+++ b/web/src/lib/components/kit/fields/TextField.svelte
@@ -36,15 +36,15 @@
 	.text-field {
 		width: 100%;
 		font-family: var(--font-mono);
-		font-size: 11px;
-		color: var(--foreground);
-		background: var(--background);
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		padding: 0.35rem 0.5rem;
+		font-size: var(--font-size-s);
+		color: var(--color-text);
+		background: var(--color-background);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-m);
+		padding: var(--space-s) var(--space-m);
 	}
 	.text-field:focus {
 		outline: none;
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 </style>
diff --git a/web/src/lib/components/kit/ui/LangToggle.svelte b/web/src/lib/components/kit/ui/LangToggle.svelte
index 16f0bc6..c7ab8c0 100644
--- a/web/src/lib/components/kit/ui/LangToggle.svelte
+++ b/web/src/lib/components/kit/ui/LangToggle.svelte
@@ -23,22 +23,22 @@
 	.lang {
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--line);
+		border: 1px solid var(--color-border);
 	}
 	.lang-btn {
 		border: 0;
 		background: transparent;
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		padding: 6px 9px;
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		padding: var(--space-s) var(--space-m);
 		cursor: pointer;
 	}
 	.lang-div {
-		color: var(--foreground);
+		color: var(--color-text);
 		font-family: var(--font-sans);
 	}
 	.lang-btn.active {
-		background: var(--foreground);
-		color: var(--background);
+		background: var(--color-text);
+		color: var(--color-background);
 	}
 </style>
diff --git a/web/src/lib/components/kit/ui/Toggle.svelte b/web/src/lib/components/kit/ui/Toggle.svelte
index 536d765..91a888f 100644
--- a/web/src/lib/components/kit/ui/Toggle.svelte
+++ b/web/src/lib/components/kit/ui/Toggle.svelte
@@ -27,19 +27,19 @@
 <style>
 	.toggle {
 		position: relative;
-		width: 32px;
-		height: 18px;
-		border: 1px solid var(--line);
+		width: var(--space-xxxl);
+		height: var(--space-xl);
+		border: 1px solid var(--color-border);
 		border-radius: 0;
-		background: var(--background);
+		background: var(--color-background);
 		cursor: pointer;
 		padding: 0;
 	}
 	.toggle.on {
-		background: var(--blue);
-		border-color: var(--blue);
+		background: var(--color-main);
+		border-color: var(--color-main);
 	}
 	.toggle-knob {
-		transition: transform 0.12s ease;
+		transition: transform var(--duration-s) ease;
 	}
 </style>
diff --git a/web/src/preview.css b/web/src/preview.css
index 13f8131..f8fe3a7 100644
--- a/web/src/preview.css
+++ b/web/src/preview.css
@@ -138,10 +138,14 @@
 
 		--space-brand: 32px;
 
+		--space-page-top: 48px;
+		--space-page-bottom: 72px;
+
 		--space-text-s: 0;
 		--space-text-m: 0.04em;
 		--space-text-l: 0.08em;
 		--space-text-xl: 0.12em;
+		--space-text-2xl: 0.18em;
 
 		--size-border: 1px;
 		--size-border-thick: 2px;
@@ -150,6 +154,12 @@
 		--size-preview-canvas-min-height-l: 360px;
 		--size-panel-min-height: 220px;
 
+		--size-tool-icon: 42px;
+		--size-tool-min-height: 106px;
+		--size-step-min-height: 138px;
+		--size-content-max: 880px;
+		--size-content-max-wide: 1680px;
+
 		--font-size-s: 12px;
 		--font-size-m: 14px;
 		--font-size-l: 16px;
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index 671a72b..ee51123 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -32,7 +32,6 @@
 	});
 
 	let crumb = $derived(toCrumb(page.url.pathname));
-	let status = $derived(toStatus(page.url.pathname));
 
 	const CRUMB: Record<string, string> = {
 		"/preview/list-tools": "CATALOG",
@@ -40,12 +39,6 @@
 		"/preview/tools/remove-background-png": "BACKGROUND REMOVER",
 	};
 
-	const STATUS: Record<string, string> = {
-		"/preview/list-tools": "LOCAL MODE / READY",
-		"/preview/tools/linear-gradient-png": "LIVE PREVIEW",
-		"/preview/tools/remove-background-png": "AUTO PROCESSING",
-	};
-
 	function toCrumb(path: string): string {
 		return (
 			"/ " +
@@ -54,10 +47,6 @@
 				"PREVIEW")
 		);
 	}
-
-	function toStatus(path: string): string {
-		return STATUS[path] ?? "AUTO PIPELINE";
-	}
 </script>
 
 <main class="preview-root" data-theme={theme}>
@@ -70,9 +59,9 @@
 	main {
 		background-color: var(--color-background);
 		background-image:
-			linear-gradient(var(--background-muted) 1px, #0000 1px),
-			linear-gradient(90deg, var(--background-muted) 1px, #0000 1px);
-		background-size: 32px 32px;
+			linear-gradient(var(--color-background-muted) 1px, #0000 1px),
+			linear-gradient(90deg, var(--color-background-muted) 1px, #0000 1px);
+		background-size: var(--space-xxxl) var(--space-xxxl);
 		min-height: 100vh;
 	}
 </style>
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index 32328ea..b91a717 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -60,40 +60,40 @@
 
 <style>
 	.workspace {
-		max-width: 880px;
+		max-width: var(--size-content-max);
 		margin: 0 auto;
-		padding: 2.5rem 1.25rem 4rem;
+		padding: var(--space-page-top) var(--space-xl) var(--space-page-bottom);
 		display: flex;
 		flex-direction: column;
-		gap: 1.5rem;
+		gap: var(--space-xxl);
 	}
 	.ws-head {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--space-m);
 	}
 	.ws-eyebrow {
 		font-family: var(--font-mono);
-		font-size: 12px;
-		letter-spacing: 0.18em;
-		color: var(--muted);
+		font-size: var(--font-size-s);
+		letter-spacing: var(--space-text-2xl);
+		color: var(--color-text-muted);
 	}
 	.ws-title {
 		margin: 0;
-		font-size: 2rem;
+		font-size: var(--font-size-2xl);
 		font-weight: 700;
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.ws-lede {
 		margin: 0;
 		max-width: 56ch;
-		color: var(--muted);
-		font-size: 0.95rem;
+		color: var(--color-text-muted);
+		font-size: var(--font-size-l);
 	}
 	.ws-search {
 		display: flex;
-		gap: 0.5rem;
-		padding: 0.75rem 1rem;
+		gap: var(--space-m);
+		padding: var(--space-l) var(--space-xl);
 		align-items: center;
 	}
 	.ws-field {
@@ -102,7 +102,7 @@
 	.ws-results {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-		gap: 0.75rem;
-		padding: 0.5rem 1rem 1rem;
+		gap: var(--space-l);
+		padding: var(--space-m) var(--space-xl);
 	}
 </style>
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index db5b19c..929d181 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -192,10 +192,12 @@
 	.showcase {
 		max-width: none;
 		margin: 0 auto;
-		padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
+		padding: var(--space-page-top)
+			clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
+			var(--space-page-bottom);
 		display: flex;
 		flex-direction: column;
-		gap: 1.25rem;
+		gap: var(--space-xl);
 	}
 	.showcase-head {
 		display: flex;
@@ -204,9 +206,9 @@
 	}
 	.showcase-eyebrow {
 		font-family: var(--font-mono);
-		font-size: 12px;
-		letter-spacing: 0.18em;
-		color: var(--muted);
+		font-size: var(--font-size-s);
+		letter-spacing: var(--space-text-2xl);
+		color: var(--color-text-muted);
 	}
 	.stack {
 		display: flex;
@@ -215,13 +217,13 @@
 	.tool-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
+		gap: var(--space-l);
+		padding: var(--space-l) var(--space-xl);
 	}
 	.preview-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
+		gap: var(--space-l);
+		padding: var(--space-l) var(--space-xl);
 	}
 </style>
diff --git a/web/src/routes/preview/list-tools/+page.svelte b/web/src/routes/preview/list-tools/+page.svelte
index 62aa97a..885d91e 100644
--- a/web/src/routes/preview/list-tools/+page.svelte
+++ b/web/src/routes/preview/list-tools/+page.svelte
@@ -49,25 +49,27 @@
 
 <style>
 	.catalog-page {
-		padding: 60px clamp(24px, 4vw, 72px) 72px;
+		padding: var(--space-page-top)
+			clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
+			var(--space-page-bottom);
 	}
 	.catalog-groups {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 56px 28px;
+		gap: var(--space-page-top) var(--space-xxl);
 	}
 	.catalog-footer {
 		display: flex;
-		gap: 1.5rem;
+		gap: var(--space-xxl);
 		flex-wrap: wrap;
-		margin-top: 56px;
-		padding-top: 24px;
-		border-top: 1px solid var(--line);
+		margin-top: var(--space-page-top);
+		padding-top: var(--space-xxl);
+		border-top: 1px solid var(--color-border);
 		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		color: var(--muted);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
 	}
-	@media (max-width: 800px) {
+	@media (--bp-tablet) {
 		.catalog-groups {
 			grid-template-columns: 1fr;
 		}
diff --git a/web/src/routes/preview/tools/[id]/+page.svelte b/web/src/routes/preview/tools/[id]/+page.svelte
index 15d8d33..a59ef0b 100644
--- a/web/src/routes/preview/tools/[id]/+page.svelte
+++ b/web/src/routes/preview/tools/[id]/+page.svelte
@@ -31,8 +31,10 @@
 
 <style>
 	.notfound {
-		max-width: 1680px;
+		max-width: var(--size-content-max-wide);
 		margin: 0 auto;
-		padding: 48px clamp(24px, 4vw, 72px) 72px;
+		padding: var(--space-page-top)
+			clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
+			var(--space-page-bottom);
 	}
 </style>