refactor: update css vars lint rules and fix them

AGENTS.md

@@ -114,8 +114,12 @@ scoped-путям (`kit/**`, `preview/**`).
   `hct()` (эммит в sRGB-hex делает postcss-плагин `web/scripts/postcss-hct.mjs`)
   и только в preview.css.
 - Размеры: `--space-*`, `--text-*` (font-size), `--radius-*`, `--size-*`.
-- Брейкпоинты: `--bp-mobile` (640px), `--bp-tablet` (800px), `--bp-desktop`
+- Брейкпоинты: `@custom-media --bp-mobile (max-width: 640px)` /
-  (1100px) — mobile-first.
+  `--bp-tablet (800px)` / `--bp-desktop (1100px)` — объявляются в preview.css,
+  используются как `@media (--bp-*)`. CSS-переменные в `@media` не работают,
+  поэтому отдельных `--bp-*` токенов нет; раскрытие делает postcss-плагин
+  `postcss-custom-media` (конфиг `web/postcss.config.js`, определения
+  подтягиваются через `@csstools/postcss-global-data`).
 - z-index: `--z-*`; длительности/анимации: `--duration-*`, `--ease-*`.
 - Правило `custom-property-pattern` в stylelint тестирует паттерн **без** `--`
   (`--x` → `x`), а `declaration-property-value-disallowed-list` — целиком с `--`.

web/eslint-plugins/design-tokens/lists.js

@@ -6,14 +6,14 @@
 // Properties that accept a COLOR.
 // =====================================================================
 export const COLOR_PROPS =
-	/^(color|background|background-color|border|border-color|border-top|border-right|border-bottom|border-left|outline|outline-color|box-shadow|text-shadow|fill|stroke|fill-color|stroke-color|stop-color|flood-color|lighting-color|column-rule|column-rule-color|text-decoration|text-decoration-color|caret-color|accent-color|border-top-color|border-right-color|border-bottom-color|border-left-color)$/;
+	/^(color|background|background-color|background-image|border|border-color|border-top|border-right|border-bottom|border-left|outline|outline-color|box-shadow|text-shadow|fill|stroke|fill-color|stroke-color|stop-color|flood-color|lighting-color|column-rule|column-rule-color|text-decoration|text-decoration-color|caret-color|accent-color|border-top-color|border-right-color|border-bottom-color|border-left-color)$/;
 
 // =====================================================================
 // Properties that accept a SIZE (px/rem/em).
 // z-index is handled separately (it's an integer, not a length).
 // =====================================================================
 export const SIZE_PROPS =
-	/^(width|height|min-width|max-width|min-height|max-height|padding|padding-top|padding-right|padding-bottom|padding-left|margin|margin-top|margin-right|margin-bottom|margin-left|gap|column-gap|row-gap|top|right|bottom|left|inset|font-size|letter-spacing|word-spacing|line-height|border-radius|border-top-left-radius|border-top-right-radius|border-bottom-left-radius|border-bottom-right-radius|border-width|border-top-width|border-right-width|border-bottom-width|border-left-width|flex-basis|background-size|border-spacing)$/;
+	/^(width|height|min-width|max-width|min-height|max-height|padding|padding-top|padding-right|padding-bottom|padding-left|margin|margin-top|margin-right|margin-bottom|margin-left|gap|column-gap|row-gap|top|right|bottom|left|inset|font|font-size|letter-spacing|word-spacing|line-height|border-radius|border-top-left-radius|border-top-right-radius|border-bottom-left-radius|border-bottom-right-radius|border-width|border-top-width|border-right-width|border-bottom-width|border-left-width|flex-basis|background-size|background-position|border-spacing|grid-template-columns|grid-template-rows)$/;
 
 // =====================================================================
 // SHORTHAND properties that accept BOTH a color and a size. The browser

web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js

@@ -9,6 +9,7 @@ import {
 	DURATION_PROPS,
 	FORBIDDEN_DURATION_TOKEN,
 	FORBIDDEN_SIZE_TOKEN,
+	MIXED_PROPS,
 	SIZE_PROPS,
 } from "./lists.js";
 import { getStyleNodeLoc, getStyleRoot } from "./style-context.js";
@@ -36,7 +37,9 @@ export default {
 			hardcodedZIndex:
 				"Hardcoded z-index '{{value}}'. Use a var(--z-...) token.",
 			hardcodedBreakpoint:
-				"Hardcoded breakpoint '{{value}}' in @media. Use a var(--bp-...) token.",
+				"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in preview.css and write `@media (--bp-*)`.",
+			varInMedia:
+				"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in preview.css and use `@media (--bp-*)`.",
 			colorMix:
 				"color-mix() in component ({{value}}). Tokenize the result in the design CSS file.",
 		},
@@ -69,6 +72,10 @@ export default {
 				const BREAKPOINT_RE =
 					/(?:(?:max|min)-width)\s*:\s*(?!var\()(\d+(?:\.\d+)?(?:px|rem|em))/gi;
 
+				// Custom properties do not resolve inside @media conditions, so any
+				// var(--bp-*) inside @media is a latent bug — the block never applies.
+				const VAR_IN_MEDIA_RE = /var\(\s*(--[a-zA-Z0-9-]+)/g;
+
 				// Sub-rule 6: color-mix() is banned anywhere in a component style.
 				const COLOR_MIX_RE = /color-mix\s*\(/gi;
 
@@ -80,6 +87,10 @@ export default {
 					while ((m = BREAKPOINT_RE.exec(params)) !== null) {
 						report(atRule, "hardcodedBreakpoint", { value: m[1] });
 					}
+					VAR_IN_MEDIA_RE.lastIndex = 0;
+					while ((m = VAR_IN_MEDIA_RE.exec(params)) !== null) {
+						report(atRule, "varInMedia", { value: m[1] });
+					}
 				});
 
 				// --- declarations --- //
@@ -115,13 +126,16 @@ export default {
 					// Sub-rule 2: sizes.
 					// Fire only on a real remaining px/rem/em token — percentages
 					// (width: 80%) and unitless values (line-height: 1.5) stay legal.
-					// Only legal absolute length is a single 1px border line.
+					// The only legal absolute length is a 0px reset line.
-					if (SIZE_PROPS.test(prop)) {
+					// MIXED_PROPS (border/outline shorthands) are checked for their
+					// SIZE half too — a border width must come from var(--size-*).
+					if (SIZE_PROPS.test(prop) || MIXED_PROPS.test(prop)) {
 						const withoutVars = stripVars(value);
-						const match = withoutVars.match(FORBIDDEN_SIZE_TOKEN);
+						const reported = new Set();
-						if (match) {
+						for (const match of withoutVars.matchAll(FORBIDDEN_SIZE_TOKEN)) {
 							const shown = match[0];
-							if (shown !== "1px" && shown !== "0px") {
+							if (shown !== "0px" && !reported.has(shown)) {
+								reported.add(shown);
 								report(decl, "hardcodedSize", { prop, value: shown });
 							}
 						}
@@ -140,12 +154,13 @@ export default {
 							)
 							.trim();
 						if (withoutKeywords !== "" && withoutKeywords !== "0") {
-							const match = value.match(COLOR_LITERAL);
+							const reported = new Set();
-							if (match) {
+							for (const match of value.matchAll(COLOR_LITERAL)) {
-								report(decl, "hardcodedColor", {
+								const shown = match[0].trim();
-									prop,
+								if (!reported.has(shown)) {
-									value: match[0].trim(),
+									reported.add(shown);
-								});
+									report(decl, "hardcodedColor", { prop, value: shown });
+								}
 							}
 						}
 					}

web/package.json

@@ -23,6 +23,7 @@
 		"refs-dom-audit": "node scripts/audit-dom.mjs"
 	},
 	"devDependencies": {
+		"@csstools/postcss-global-data": "^4.0.0",
 		"@eslint/js": "^10.0.1",
 		"@panmdaa/colors": "^0.4.2",
 		"@sveltejs/adapter-static": "^3.0.10",
@@ -35,6 +36,7 @@
 		"globals": "^17.11.0",
 		"playwright": "^1.62.1",
 		"postcss": "^8.5.26",
+		"postcss-custom-media": "^12.0.1",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"stylelint": "^17.14.1",

web/pnpm-lock.yaml

@@ -18,6 +18,9 @@ importers:
         specifier: ^1.33.0
         version: 1.33.0(svelte@5.56.9(@typescript-eslint/types@8.67.0))
     devDependencies:
+      '@csstools/postcss-global-data':
+        specifier: ^4.0.0
+        version: 4.0.0(postcss@8.5.26)
       '@eslint/js':
         specifier: ^10.0.1
         version: 10.0.1(eslint@10.9.0(supports-color@10.2.2))
@@ -54,6 +57,9 @@ importers:
       postcss:
         specifier: ^8.5.26
         version: 8.5.26
+      postcss-custom-media:
+        specifier: ^12.0.1
+        version: 12.0.1(postcss@8.5.26)
       prettier:
         specifier: ^3.9.6
         version: 3.9.6
@@ -104,6 +110,13 @@ packages:
   '@cacheable/utils@2.5.0':
     resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==}
 
+  '@csstools/cascade-layer-name-parser@3.0.0':
+    resolution: {integrity: sha512-/3iksyevwRfSJx5yH0RkcrcYXwuhMQx3Juqf40t97PeEy2/Mz2TItZ/z/216qpe4GgOyFBP8MKIwVvytzHmfIQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
   '@csstools/css-calc@3.3.0':
     resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
     engines: {node: '>=20.19.0'}
@@ -136,6 +149,12 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
+  '@csstools/postcss-global-data@4.0.0':
+    resolution: {integrity: sha512-mPKrL3Tzt8k1V+hTkU8XTH6JKRekB97oKHv/MekC9nfmRa+gMf1swlHRt8YK722sYN4xOipl17FZst99jsScLA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss: ^8.4
+
   '@csstools/selector-resolve-nested@4.0.1':
     resolution: {integrity: sha512-j3vdQu0XwLME5qOTWxm8cnmvsf423R2YL6DbKklCHZwkDm7UdKNu6RPlw4REIJhSlKBICY3B70/7QZdicLqZgg==}
     engines: {node: '>=20.19.0'}
@@ -1176,6 +1195,12 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  postcss-custom-media@12.0.1:
+    resolution: {integrity: sha512-66syE14+VeqkUf0rRX0bvbTCbNRJF132jD+ceo8th1dap2YJEAqpdh5uG98CE3IbgHT7m9XM0GIlOazNWqQdeA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss: ^8.4
+
   postcss-load-config@3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -1582,6 +1607,11 @@ snapshots:
       hashery: 1.5.1
       keyv: 5.6.0
 
+  '@csstools/cascade-layer-name-parser@3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
   '@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
@@ -1602,6 +1632,10 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
+  '@csstools/postcss-global-data@4.0.0(postcss@8.5.26)':
+    dependencies:
+      postcss: 8.5.26
+
   '@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.5)':
     dependencies:
       postcss-selector-parser: 7.1.5
@@ -2520,6 +2554,14 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
+  postcss-custom-media@12.0.1(postcss@8.5.26):
+    dependencies:
+      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.26
+
   postcss-load-config@3.1.4(postcss@8.5.26):
     dependencies:
       lilconfig: 2.1.0

web/postcss.config.js

@@ -1,5 +1,17 @@
 import postcssHct from "./scripts/postcss-hct.mjs";
+import postcssGlobalData from "@csstools/postcss-global-data";
+import postcssCustomMedia from "postcss-custom-media";
 
 export default {
-	plugins: [postcssHct],
+	plugins: [
+		// Breakpoints live only in preview.css (next to the --bp-* tokens);
+		// global-data injects them so @media (--bp-*) expands in every file.
+		postcssGlobalData({
+			files: ["src/preview.css"],
+		}),
+		postcssCustomMedia({
+			preserve: false,
+		}),
+		postcssHct,
+	],
 };

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;
+		gap: var(--space-xl);
-		padding-bottom: 0.5rem;
+		padding-bottom: var(--space-m);
-		border-bottom: 1px solid var(--line);
+		border-bottom: var(--size-border) solid var(--color-border);
 	}
 	.group-title span {
-		font: 12px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.14em;
+		letter-spacing: var(--space-text-xl);
-		color: var(--foreground);
+		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;
+		letter-spacing: var(--space-text-l);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.tool-cards {
 		display: grid;
-		gap: 10px;
+		gap: var(--space-m);
 	}
 </style>

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);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.18em;
+		letter-spacing: var(--space-text-xl);
-		color: var(--muted);
+		color: var(--color-text-muted);
-		margin-bottom: 0.5rem;
+		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);
+		color: var(--color-text-muted);
-		font-size: 0.95rem;
+		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);
+		font: 700 var(--font-size-2xl) var(--font-mono);
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.catalog-total span {
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.08em;
+		letter-spacing: var(--space-text-l);
-		color: var(--muted);
+		color: var(--color-text-muted);
 		text-align: right;
-		margin-top: 0.35rem;
+		margin-top: var(--space-s);
 	}
 </style>

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;
+		gap: var(--space-m);
-		padding: 0.5rem 0.75rem;
+		padding: var(--space-m) var(--space-l);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		background: var(--panel);
+		background: var(--color-panel);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.catalog-search input {
 		border: none;
 		background: transparent;
 		outline: none;
-		color: var(--foreground);
+		color: var(--color-text);
-		font: 12px var(--font-mono);
+		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: var(--size-border) solid var(--color-border);
 		background: transparent;
-		color: var(--muted);
+		color: var(--color-text-muted);
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.06em;
+		letter-spacing: var(--space-text-m);
-		padding: 0.4rem 0.6rem;
+		padding: var(--space-s) var(--space-m);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
 		cursor: pointer;
 	}
 	.catalog-filters button.active {
-		background: var(--blue);
+		background: var(--color-main);
-		color: #fff;
+		color: var(--color-background);
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 </style>

web/src/lib/components/kit/CheckerCanvas.svelte

@@ -20,25 +20,25 @@
 		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, var(--color-checker-main) 25%, transparent 25%),
-			linear-gradient(-45deg, #1a2129 25%, transparent 25%),
+			linear-gradient(-45deg, var(--color-checker-main) 25%, transparent 25%),
-			linear-gradient(45deg, transparent 75%, #1a2129 75%),
+			linear-gradient(45deg, transparent 75%, var(--color-checker-main) 75%),
-			linear-gradient(-45deg, transparent 75%, #1a2129 75%);
+			linear-gradient(-45deg, transparent 75%, var(--color-checker-main) 75%);
-		background-size: 20px 20px;
+		background-size: var(--space-xl) var(--space-xl);
 		background-position:
 			0 0,
-			0 10px,
+			0 calc(var(--space-xl) / 2),
-			10px -10px,
+			calc(var(--space-xl) / 2) calc(-1 * var(--space-xl) / 2),
-			-10px 0;
+			calc(-1 * var(--space-xl) / 2) 0;
 	}
 
 	.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>

web/src/lib/components/kit/CodeBlock.svelte

@@ -24,27 +24,27 @@
 <style>
 	.code-block {
 		position: relative;
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		background: var(--background);
+		background: var(--color-background);
-		padding: 0.6rem 0.8rem;
+		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;
+		font-size: var(--font-size-s);
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.code-copy {
 		position: absolute;
-		top: 0.4rem;
+		top: var(--space-s);
-		right: 0.4rem;
+		right: var(--space-s);
 	}
 </style>

web/src/lib/components/kit/Dropzone.svelte

@@ -63,32 +63,32 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
-		min-height: 220px;
+		min-height: var(--size-panel-min-height);
-		padding: 2rem;
+		padding: var(--space-xxxl);
-		border: 1px dashed var(--line);
+		border: var(--size-border) dashed var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		color: var(--muted);
+		color: var(--color-text-muted);
-		background: var(--background);
+		background: var(--color-background);
 		cursor: pointer;
 		text-align: center;
 		transition:
-			border-color 0.15s ease,
+			border-color var(--duration-m) ease,
-			background 0.15s ease;
+			background var(--duration-m) ease;
 	}
 	.dropzone:hover,
 	.dropzone:focus-visible,
 	.dropzone.dragging {
-		border-color: var(--blue);
+		border-color: var(--color-main);
-		color: var(--foreground);
+		color: var(--color-text);
 		outline: none;
 	}
 	.dz-title {
-		font: 600 0.9rem var(--font-mono);
+		font: 600 var(--font-size-m) var(--font-mono);
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.dz-sub {
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.04em;
+		letter-spacing: var(--space-text-m);
 	}
 </style>

web/src/lib/components/kit/EmptyState.svelte

@@ -23,20 +23,20 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
-		padding: 2rem 1rem;
+		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);
+		color: var(--color-text);
-		font-size: 0.95rem;
+		font-size: var(--font-size-m);
 	}
 	.empty-desc {
-		font-size: 0.8rem;
+		font-size: var(--font-size-s);
 		max-width: 32ch;
 	}
 </style>

web/src/lib/components/kit/FileChip.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import type { Component } from "svelte";
-	import { Upload } from "@lucide/svelte";
-
-	interface Props {
-		name: string;
-		size?: string;
-		icon?: Component<{ size?: number }>;
-	}
-
-	let { name, size, icon = Upload }: Props = $props();
-	const Cmp = $derived(icon);
-</script>
-
-<div class="file-chip">
-	<Cmp size={15} />
-	<span>{name}</span>
-	{#if size}<b>{size}</b>{/if}
-</div>
-
-<style>
-	.file-chip {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		white-space: nowrap;
-		border: 1px solid var(--line);
-		background: var(--panel);
-		font: 11px var(--font-mono);
-		color: var(--muted);
-		padding: 10px 12px;
-	}
-	.file-chip b {
-		color: var(--blue);
-		font-weight: 500;
-	}
-</style>

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: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		padding: 0.6rem;
+		padding: var(--space-m);
-		background: var(--panel);
+		background: var(--color-panel);
 	}
 	.image-canvas {
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
 		overflow: hidden;
 	}
 </style>

web/src/lib/components/kit/MetaList.svelte

@@ -15,10 +15,10 @@
 
 <style>
 	.meta-list {
-		border-top: 1px solid var(--line);
+		border-top: var(--size-border) solid var(--color-border);
 		grid-template-columns: repeat(3, 1fr);
-		gap: 8px;
+		gap: var(--space-m);
-		padding-top: 14px;
+		padding-top: var(--space-l);
 		display: grid;
 	}
 </style>

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;
+		font-size: var(--font-size-s);
-		color: var(--muted);
+		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);
+		font: var(--font-size-s) var(--font-mono);
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 </style>

web/src/lib/components/kit/PanelHeading.svelte

@@ -23,18 +23,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
+		gap: var(--space-xl);
-		padding: 0.75rem 1rem;
+		padding: var(--space-l) var(--space-xl);
-		border-bottom: 1px solid var(--line);
+		border-bottom: var(--size-border) 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>

web/src/lib/components/kit/PipelineFooter.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { RotateCcw } from "@lucide/svelte";
-	import StatusDot from "./StatusDot.svelte";
-
-	interface Props {
-		onreset?: () => void;
-		note?: string;
-	}
-
-	let { onreset, note = "changes are applied automatically" }: Props = $props();
-</script>
-
-<div class="pipeline-footer">
-	<button class="reset-btn" onclick={() => onreset?.()}>
-		<RotateCcw size={14} /> Reset pipeline
-	</button>
-	<span class="auto-note"><StatusDot /> {note}</span>
-</div>
-
-<style>
-	.pipeline-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding-top: 18px;
-	}
-	.reset-btn {
-		display: flex;
-		align-items: center;
-		gap: 7px;
-		color: var(--blue);
-		background: none;
-		border: 0;
-		cursor: pointer;
-		font-size: 12px;
-	}
-	.auto-note {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--muted);
-		font: 11px var(--font-mono);
-	}
-</style>

web/src/lib/components/kit/PreviewPanel.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
-	import Dropzone from "$lib/components/kit/Dropzone.svelte";
-	import EmptyState from "$lib/components/kit/EmptyState.svelte";
-	import Panel from "$lib/components/kit/layout/Panel.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
-	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 DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
-	import type { PixelImage } from "$lib/core/types";
-
-	interface PreviewItem {
-		toolId: string;
-		title: string;
-		url: string;
-	}
-
-	interface MetaItem {
-		caption: string;
-		value: string;
-	}
-
-	interface Props {
-		needsSource: boolean;
-		sourceImg: PixelImage | null;
-		sourceUrl: string;
-		stepOutputs: PreviewItem[];
-		resultUrl: string;
-		resultMeta: MetaItem[];
-		processing: boolean;
-		chainError: string;
-		onFile: (file: File) => void;
-		onClearSource: () => void;
-		onDownload: () => void;
-	}
-
-	let {
-		needsSource,
-		sourceImg,
-		sourceUrl,
-		stepOutputs,
-		resultUrl,
-		resultMeta,
-		processing,
-		chainError,
-		onFile,
-		onClearSource,
-		onDownload,
-	}: Props = $props();
-</script>
-
-<Panel title="Pipeline output" eyebrow="RESULT">
-	{#if resultUrl}
-		<DownloadButton label="Download result" onclick={onDownload} />
-	{/if}
-
-	<div class="preview-body">
-		{#if chainError}
-			<EmptyState title="Pipeline failed" description={chainError} />
-		{/if}
-		{#if needsSource && !sourceImg}
-			<Dropzone onfile={onFile} />
-		{:else if needsSource && sourceImg}
-			<Button variant="outline" onclick={onClearSource} label="Change image" />
-		{/if}
-		<PreviewStack>
-			{#if needsSource && sourceImg}
-				<PreviewTile label="SOURCE" caption="">
-					<CheckerCanvas size="sm">
-						<img class="tile-img" src={sourceUrl} alt="source" />
-					</CheckerCanvas>
-				</PreviewTile>
-			{/if}
-			{#each stepOutputs as out, i (out.toolId + i)}
-				<PreviewTile
-					label={`STEP ${String(i + 1).padStart(2, "0")}`}
-					caption=""
-				>
-					<CheckerCanvas size="sm">
-						<img class="tile-img" src={out.url} alt={out.title} />
-					</CheckerCanvas>
-				</PreviewTile>
-			{/each}
-		</PreviewStack>
-		{#if processing}
-			<StatusLine label="processing pipeline" />
-		{/if}
-		<MetaList items={resultMeta} />
-	</div>
-</Panel>
-
-<style>
-	.preview-body {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		padding: 1rem;
-	}
-	.tile-img {
-		max-width: 100%;
-		max-height: 220px;
-		display: block;
-		border-radius: var(--radius);
-	}
-</style>

web/src/lib/components/kit/PreviewStack.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		pad?: string;
-		children: Snippet;
-	}
-
-	let { pad = "0", children }: Props = $props();
-</script>
-
-<div class="preview-stack" style="padding:{pad};">
-	{@render children()}
-</div>
-
-<style>
-	.preview-stack {
-		grid-template-columns: 1fr 1fr;
-		gap: 12px;
-		width: 100%;
-		min-width: 0;
-		display: grid;
-	}
-	@media (max-width: 1100px) {
-		.preview-stack {
-			grid-template-columns: repeat(3, minmax(220px, 1fr));
-		}
-	}
-</style>

web/src/lib/components/kit/PreviewTile.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		label: string;
-		caption: string;
-		active?: boolean;
-		children: Snippet;
-	}
-
-	let { label, caption, active = false, children }: Props = $props();
-</script>
-
-<div class="preview-tile" class:active>
-	<div class="tile-canvas">{@render children()}</div>
-	<div class="tile-label">
-		<span>{label}</span>
-		<b>{caption}</b>
-	</div>
-</div>
-
-<style>
-	.preview-tile {
-		width: 100%;
-		min-width: 0;
-		overflow: hidden;
-		border: 1px solid var(--line);
-		background: var(--background);
-		&.active {
-			border-color: var(--blue);
-		}
-	}
-	.tile-canvas {
-		width: 100%;
-		min-width: 0;
-		min-height: 260px;
-		min-height: clamp(300px, 22vw, 430px);
-		overflow: hidden;
-		aspect-ratio: 1.35;
-		background-color: var(--checker-background);
-		background-image:
-			linear-gradient(45deg, var(--checker-background-cross) 25%, #0000 25%),
-			linear-gradient(-45deg, var(--checker-background-cross) 25%, #0000 25%),
-			linear-gradient(45deg, #0000 75%, var(--checker-background-cross) 75%),
-			linear-gradient(-45deg, #0000 75%, var(--checker-background-cross) 75%);
-		background-position:
-			0 0,
-			0 7px,
-			7px -7px,
-			-7px 0;
-		background-size: 14px 14px;
-		place-items: center;
-		padding: 16px;
-		display: grid;
-	}
-	.tile-label {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 8px;
-		border-top: 1px solid var(--line);
-		font: 9px var(--font-mono);
-		color: var(--blue);
-	}
-	.tile-label span {
-		font: 9px var(--font-mono);
-		color: var(--blue);
-	}
-	.tile-label b {
-		font: 400 9px var(--font-mono);
-		color: var(--muted);
-		text-align: right;
-	}
-</style>

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;
 		}

web/src/lib/components/kit/SchemaToolView.svelte

@@ -267,7 +267,10 @@
 	}
 	.workspace {
 		display: grid;
-		grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
+		grid-template-columns: minmax(var(--size-workspace-min), 1fr) minmax(
+				0,
+				2fr
+			);
 		gap: var(--space-xxl);
 		align-items: start;
 	}
@@ -293,7 +296,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;
 		}

web/src/lib/components/kit/SectionLabel.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import MonoLabel from "./MonoLabel.svelte";
-
-	interface Props {
-		label: string;
-		title: string;
-		meta?: string;
-		actions?: Snippet;
-		unwrapActions?: boolean;
-	}
-
-	let { label, title, meta, actions, unwrapActions = false }: Props = $props();
-</script>
-
-<div class="section-label">
-	<div class="section-text">
-		<MonoLabel>{label}</MonoLabel>
-		<strong
-			>{title}{#if meta}<em>{meta}</em>{/if}</strong
-		>
-	</div>
-	{#if actions}
-		{#if unwrapActions}
-			{@render actions()}
-		{:else}
-			<div class="section-actions">
-				{@render actions()}
-			</div>
-		{/if}
-	{/if}
-</div>
-
-<style>
-	.section-label {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--line);
-		padding-bottom: 12px;
-	}
-	.section-text strong {
-		display: block;
-		margin-top: 5px;
-		font: 600 14px var(--font-mono);
-		color: var(--foreground);
-	}
-	.section-text em {
-		color: #25a96a;
-		font-style: normal;
-		font-size: 10px;
-	}
-	.section-actions {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 10px;
-	}
-</style>

web/src/lib/components/kit/SettingGroup.svelte

@@ -19,13 +19,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
+		gap: var(--space-xl);
-		padding: 0.6rem 1rem;
+		padding: var(--space-m) var(--space-xl);
-		border-bottom: 1px solid var(--line);
+		border-bottom: var(--size-border) solid var(--color-border);
 	}
 	.setting-control {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
 	}
 </style>

web/src/lib/components/kit/SettingsFooter.svelte

@@ -14,8 +14,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
-		gap: 0.5rem;
+		gap: var(--space-m);
-		padding: 0.75rem 1rem;
+		padding: var(--space-l) var(--space-xl);
-		border-top: 1px solid var(--line);
+		border-top: var(--size-border) solid var(--color-border);
 	}
 </style>

web/src/lib/components/kit/StatusDot.svelte

@@ -2,9 +2,9 @@
 
 <style>
 	.status-dot {
-		width: 6px;
+		width: var(--space-s);
-		height: 6px;
+		height: var(--space-s);
 		border-radius: 50%;
-		background-color: var(--success2);
+		background-color: var(--color-success);
 	}
 </style>

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>

web/src/lib/components/kit/StepCard.svelte

@@ -45,45 +45,45 @@
 <style>
 	.step-card {
 		display: grid;
-		grid-template-columns: 46px 20px 1fr;
+		grid-template-columns: var(--size-step-index) var(--size-step-grip) 1fr;
-		min-height: 138px;
+		min-height: var(--size-step-min-height);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		background: var(--panel);
+		background: var(--color-panel);
 	}
 	.step-index {
-		font: 11px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		color: var(--blue);
+		color: var(--color-main);
-		padding: 17px 0 0px 15px;
+		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;
+		gap: var(--space-xl);
-		border-color: var(--line);
+		border-color: var(--color-border);
 	}
 	.step-type {
-		color: var(--muted);
+		color: var(--color-text-muted);
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.12em;
+		letter-spacing: var(--space-text-xl);
 	}
 	.step-title {
-		margin: 5px 0 18px;
+		margin: var(--space-s) 0 var(--space-xl);
-		font: 600 15px var(--font-mono);
+		font: 600 var(--font-size-m) var(--font-mono);
-		color: var(--foreground);
+		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;
+		margin-top: var(--space-xl);
-		color: var(--line);
+		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>

web/src/lib/components/kit/ToolCard.svelte

@@ -29,46 +29,48 @@
 <style>
 	.tool-card {
 		display: grid;
-		grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
+		grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) var(
+				--space-xxl
+			) var(--size-tool-arrow);
 		align-items: center;
-		gap: 14px;
+		gap: var(--space-l);
-		min-height: 106px;
+		min-height: var(--size-tool-min-height);
-		padding: 16px;
+		padding: var(--space-xl);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		background: var(--panel);
+		background: var(--color-panel);
-		color: var(--foreground);
+		color: var(--color-text);
 		text-decoration: none;
 	}
 	.tool-card:hover {
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 	.tool-icon {
-		width: 42px;
+		width: var(--size-tool-icon);
-		height: 42px;
+		height: var(--size-tool-icon);
 		display: grid;
 		place-items: center;
-		background: color-mix(in srgb, var(--blue) 12%, transparent);
+		background: var(--color-main-soft);
-		color: var(--blue);
+		color: var(--color-main);
-		border-radius: var(--radius);
+		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);
+		font: 600 var(--font-size-s) var(--font-mono);
-		color: var(--foreground);
+		color: var(--color-text);
 	}
 	.tool-copy span {
-		font: 12px/1.5 var(--font-mono);
+		font: var(--font-size-s)/1.5 var(--font-mono);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.tool-index {
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		color: var(--muted);
+		color: var(--color-text-muted);
 		align-self: start;
 	}
 </style>

web/src/lib/components/kit/WorkspaceHeader.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	import FileChip from "$lib/components/kit/FileChip.svelte";
-
-	interface FileInfo {
-		name: string;
-		size?: string;
-	}
-
-	interface Props {
-		eyebrowA: string;
-		eyebrowB?: string;
-		title: string;
-		lede?: string;
-		file?: FileInfo;
-	}
-
-	let { eyebrowA, eyebrowB, title, lede, file }: Props = $props();
-</script>
-
-<div class="eyebrow">
-	{eyebrowA} <span>/</span>
-	{eyebrowB}
-</div>
-<div class="title-row">
-	<div>
-		<h1>{title}</h1>
-		{#if lede}<p class="lede">{lede}</p>{/if}
-	</div>
-	{#if file}
-		<FileChip name={file.name} size={file.size} />
-	{/if}
-</div>
-
-<style>
-	.eyebrow {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.12em;
-		color: var(--blue);
-		margin-bottom: 18px;
-	}
-	.eyebrow span {
-		margin: 0 7px;
-		color: var(--muted);
-	}
-	.title-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-		gap: 30px;
-		margin-bottom: 56px;
-	}
-	h1 {
-		margin: 0 0 16px;
-		font-size: clamp(36px, 4vw, 64px);
-		font-weight: 650;
-		line-height: 1;
-		letter-spacing: -0.06em;
-		color: var(--foreground);
-		max-width: 700px;
-	}
-	.lede {
-		margin: 0;
-		max-width: 550px;
-		color: var(--muted);
-		line-height: 1.6;
-	}
-	@media (max-width: 800px) {
-		.title-row {
-			flex-direction: column;
-			align-items: flex-start;
-		}
-	}
-</style>

web/src/lib/components/kit/fields/CheckboxField.svelte

@@ -21,12 +21,12 @@
 	.checkbox-field {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
-		font-size: 0.85rem;
+		font-size: var(--font-size-m);
-		color: var(--foreground);
+		color: var(--color-text);
 		cursor: pointer;
 	}
 	.checkbox-field input {
-		accent-color: var(--blue);
+		accent-color: var(--color-main);
 	}
 </style>

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);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.08em;
+		letter-spacing: var(--space-text-l);
-		color: var(--muted);
+		color: var(--color-text-muted);
-		margin-bottom: 8px;
+		margin-bottom: var(--space-m);
 	}
 	.color-field {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: var(--space-m);
-		padding-left: 8px;
+		padding-left: var(--space-m);
-		padding-right: 8px;
+		padding-right: var(--space-m);
-		height: 32px;
+		height: var(--space-xxxl);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
 	}
 	.swatch {
-		width: 14px;
+		width: var(--space-l);
-		height: 14px;
+		height: var(--space-l);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
 		flex: none;
 	}
 	.color-field input {
 		min-width: 0;
-		color: var(--foreground);
+		color: var(--color-text);
-		font: 11px var(--font-mono);
+		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>

web/src/lib/components/kit/fields/FieldGrid.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		compact?: boolean;
-		children: Snippet;
-	}
-
-	let { compact = false, children }: Props = $props();
-</script>
-
-<div class="controls" class:compact>
-	{@render children()}
-</div>
-
-<style>
-	.controls {
-		display: grid;
-		grid-template-columns: 1.1fr 1fr 1.2fr;
-		gap: 16px;
-	}
-	.controls.compact {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 16px;
-	}
-
-	@media (max-width: 800px) {
-		.controls,
-		.controls.compact {
-			grid-auto-flow: row;
-			grid-auto-columns: auto;
-		}
-	}
-</style>

web/src/lib/components/kit/fields/NumberField.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	import Field from "./Field.svelte";
-
-	interface Props {
-		label: string;
-		value: number;
-		min?: number;
-		max?: number;
-		step?: number;
-		oninput?: (value: number) => void;
-	}
-	let { label, value = $bindable(), min, max, step, oninput }: Props = $props();
-
-	function handle(e: Event) {
-		value = Number((e.target as HTMLInputElement).value);
-		oninput?.(value);
-	}
-</script>
-
-<Field {label}>
-	<input
-		class="number-field"
-		type="number"
-		{min}
-		{max}
-		{step}
-		{value}
-		oninput={handle}
-	/>
-</Field>
-
-<style>
-	.number-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;
-	}
-	.number-field:focus {
-		outline: none;
-		border-color: var(--blue);
-	}
-</style>

web/src/lib/components/kit/fields/SelectField.svelte

@@ -32,11 +32,11 @@
 	.select-field {
 		width: 100%;
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: var(--font-size-s);
-		color: var(--foreground);
+		color: var(--color-text);
-		background: var(--background);
+		background: var(--color-background);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		padding: 0.35rem 0.5rem;
+		padding: var(--space-s) var(--space-m);
 	}
 </style>

web/src/lib/components/kit/fields/SliderField.svelte

@@ -33,19 +33,19 @@
 	label {
 		display: flex;
 		justify-content: space-between;
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		letter-spacing: 0.08em;
+		letter-spacing: var(--space-text-l);
-		color: var(--muted);
+		color: var(--color-text-muted);
-		margin-bottom: 8px;
+		margin-bottom: var(--space-m);
 	}
 	output {
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		color: var(--foreground);
+		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>

web/src/lib/components/kit/fields/TextField.svelte

@@ -36,15 +36,15 @@
 	.text-field {
 		width: 100%;
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: var(--font-size-s);
-		color: var(--foreground);
+		color: var(--color-text);
-		background: var(--background);
+		background: var(--color-background);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius);
+		border-radius: var(--radius-m);
-		padding: 0.35rem 0.5rem;
+		padding: var(--space-s) var(--space-m);
 	}
 	.text-field:focus {
 		outline: none;
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 </style>

web/src/lib/components/kit/fields/ToggleRow.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import Toggle from "../ui/Toggle.svelte";
-
-	interface Props {
-		label: string;
-		checked: boolean;
-		onchange?: (checked: boolean) => void;
-	}
-
-	let { label, checked = $bindable(), onchange }: Props = $props();
-</script>
-
-<div class="toggle-row">
-	<span>{label}</span>
-	<Toggle bind:checked {onchange} {label} />
-</div>
-
-<style>
-	.toggle-row {
-		color: var(--foreground);
-		cursor: pointer;
-	}
-</style>

web/src/lib/components/kit/layout/PageGrid.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		settings: Snippet;
-		preview: Snippet;
-	}
-
-	let { settings, preview }: Props = $props();
-</script>
-
-<div class="page-grid">
-	<section class="ws-settings">{@render settings()}</section>
-	{@render preview()}
-</div>
-
-<style>
-	.page-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(calc(50% - 28px), 1fr));
-		align-items: start;
-		gap: 56px;
-		width: 100%;
-		max-width: none;
-		margin: auto;
-		padding: 60px clamp(24px, 4vw, 72px) 72px;
-	}
-	.ws-settings {
-		min-width: 0;
-	}
-	@media (max-width: 800px) {
-		.page-grid {
-			grid-template-columns: 1fr;
-			gap: var(--ws-gap-mobile);
-			padding: 36px 16px 48px;
-		}
-	}
-</style>

web/src/lib/components/kit/ui/LangToggle.svelte

@@ -23,22 +23,22 @@
 	.lang {
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
 	}
 	.lang-btn {
 		border: 0;
 		background: transparent;
-		color: var(--muted);
+		color: var(--color-text-muted);
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
-		padding: 6px 9px;
+		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);
+		background: var(--color-text);
-		color: var(--background);
+		color: var(--color-background);
 	}
 </style>

web/src/lib/components/kit/ui/Toggle.svelte

@@ -27,19 +27,19 @@
 <style>
 	.toggle {
 		position: relative;
-		width: 32px;
+		width: var(--space-xxxl);
-		height: 18px;
+		height: var(--space-xl);
-		border: 1px solid var(--line);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: 0;
-		background: var(--background);
+		background: var(--color-background);
 		cursor: pointer;
 		padding: 0;
 	}
 	.toggle.on {
-		background: var(--blue);
+		background: var(--color-main);
-		border-color: var(--blue);
+		border-color: var(--color-main);
 	}
 	.toggle-knob {
-		transition: transform 0.12s ease;
+		transition: transform var(--duration-s) ease;
 	}
 </style>

web/src/lib/components/kit/ui/TopNav.svelte

@@ -3,7 +3,6 @@
 </script>
 
 <nav class="nav">
-	<a href={resolve("/preview/demo")}>Workspace</a>
 	<a href={resolve("/preview/list-tools")}>Catalog</a>
 	<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
 	<a href={resolve("/preview/tools/remove-background-png")}>

web/src/preview.css

@@ -5,6 +5,10 @@
 @import url("@fontsource/ibm-plex-mono/400.css");
 @import url("@fontsource/ibm-plex-mono/500.css");
 
+@custom-media --bp-mobile (max-width: 640px);
+@custom-media --bp-tablet (max-width: 800px);
+@custom-media --bp-desktop (max-width: 1100px);
+
 @layer app, design;
 
 @layer design {
@@ -118,6 +122,7 @@
 		--color-info: hct(340 80 48);
 
 		--color-main-tint: hct(from var(--brand-main) h 65 55);
+		--color-main-soft: color-mix(in srgb, var(--color-main) 12%, transparent);
 		--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);
@@ -133,26 +138,46 @@
 
 		--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;
 
+		--size-preview-canvas-min-height-s: 180px;
+		--size-preview-canvas-min-height-l: 360px;
+		--size-panel-min-height: 220px;
+
+		--size-tool-icon: 42px;
+		--size-tool-min-height: 106px;
+		--size-tool-arrow: 18px;
+		--size-step-min-height: 138px;
+		--size-step-index: 46px;
+		--size-step-grip: 20px;
+		--size-card-min: 240px;
+		--size-card-min-narrow: 200px;
+		--size-workspace-min: 260px;
+		--size-content-max: 880px;
+		--size-content-max-wide: 1680px;
+
 		--font-size-s: 12px;
 		--font-size-m: 14px;
 		--font-size-l: 16px;
 		--font-size-xl: 24px;
 		--font-size-2xl: 32px;
+		--font-size-xs: 10px;
 
 		--radius-s: 0px;
 		--radius-m: 4px;
 
-		--bp-mobile: 640px;
+		--duration-s: 0.12s;
-		--bp-tablet: 800px;
+		--duration-m: 0.15s;
-		--bp-desktop: 1100px;
 	}
 
 	[data-theme="dark"] {

web/src/routes/preview/+layout.svelte

@@ -32,22 +32,13 @@
 	});
 
 	let crumb = $derived(toCrumb(page.url.pathname));
-	let status = $derived(toStatus(page.url.pathname));
 
 	const CRUMB: Record<string, string> = {
-		"/preview/demo": "WORKSPACE",
 		"/preview/list-tools": "CATALOG",
 		"/preview/tools/linear-gradient-png": "GRADIENT",
 		"/preview/tools/remove-background-png": "BACKGROUND REMOVER",
 	};
 
-	const STATUS: Record<string, string> = {
-		"/preview/demo": "AUTO PIPELINE",
-		"/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 (
 			"/ " +
@@ -56,10 +47,6 @@
 				"PREVIEW")
 		);
 	}
-
-	function toStatus(path: string): string {
-		return STATUS[path] ?? "AUTO PIPELINE";
-	}
 </script>
 
 <main class="preview-root" data-theme={theme}>
@@ -70,11 +57,11 @@
 
 <style>
 	main {
-		background-color: var(--background);
+		background-color: var(--color-background);
 		background-image:
-			linear-gradient(var(--background-muted) 1px, #0000 1px),
+			linear-gradient(var(--color-background-muted) 1px, transparent 1px),
-			linear-gradient(90deg, var(--background-muted) 1px, #0000 1px);
+			linear-gradient(90deg, var(--color-background-muted) 1px, transparent 1px);
-		background-size: 32px 32px;
+		background-size: var(--space-xxxl) var(--space-xxxl);
 		min-height: 100vh;
 	}
 </style>

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;
+		font-size: var(--font-size-s);
-		letter-spacing: 0.18em;
+		letter-spacing: var(--space-text-2xl);
-		color: var(--muted);
+		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);
+		color: var(--color-text-muted);
-		font-size: 0.95rem;
+		font-size: var(--font-size-l);
 	}
 	.ws-search {
 		display: flex;
-		gap: 0.5rem;
+		gap: var(--space-m);
-		padding: 0.75rem 1rem;
+		padding: var(--space-l) var(--space-xl);
 		align-items: center;
 	}
 	.ws-field {
@@ -101,8 +101,8 @@
 	}
 	.ws-results {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
-		gap: 0.75rem;
+		gap: var(--space-l);
-		padding: 0.5rem 1rem 1rem;
+		padding: var(--space-m) var(--space-xl);
 	}
 </style>

web/src/routes/preview/demo/+page.svelte

@@ -1,321 +0,0 @@
-<script lang="ts">
-	import ColorField from "$lib/components/kit/fields/ColorField.svelte";
-	import FieldGrid from "$lib/components/kit/fields/FieldGrid.svelte";
-	import SliderField from "$lib/components/kit/fields/SliderField.svelte";
-	import ToggleRow from "$lib/components/kit/fields/ToggleRow.svelte";
-	import PageGrid from "$lib/components/kit/layout/PageGrid.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import PipelineFooter from "$lib/components/kit/PipelineFooter.svelte";
-	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
-	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
-	import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
-	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import Badge from "$lib/components/kit/ui/Badge.svelte";
-	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
-	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
-	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
-	import WorkspaceHeader from "$lib/components/kit/WorkspaceHeader.svelte";
-	import {
-		ChevronDown,
-		Plus,
-		Settings2,
-		SlidersHorizontal,
-	} from "@lucide/svelte";
-
-	let gradColor = $state("#DCEBFF");
-	let direction = $state(135);
-	let opacity = $state("100");
-	let outlineWidth = $state(2);
-	let outlineColor = $state("#16202B");
-	let radius = $state(18);
-	let preserveAspect = $state(false);
-
-	const previewTiles = [
-		{ label: "SOURCE", caption: "original.png · 1200 × 800", bg: "#8d9aa5" },
-		{
-			label: "STEP 01",
-			caption: "gradient applied",
-			bg: "linear-gradient(135deg, #DCEBFF, #8BC8F5)",
-		},
-		{
-			label: "STEP 02",
-			caption: "background removed",
-			bg: "linear-gradient(135deg, #DCEBFF, #8BC8F5)",
-		},
-		{
-			label: "STEP 03",
-			caption: "outline added",
-			bg: "linear-gradient(135deg, #DCEBFF, #8BC8F5)",
-			ring: "0 0 0 2px #16202B",
-		},
-		{
-			label: "FINAL OUTPUT",
-			caption: "ready · PNG-24",
-			bg: "linear-gradient(135deg, #DCEBFF, #8BC8F5)",
-			radius: "18px",
-			ring: "0 0 0 2px #16202B",
-			active: true,
-		},
-	];
-</script>
-
-<svelte:head>
-	<title>easy-png-tools / Demo</title>
-	<meta name="robots" content="noindex, nofollow" />
-</svelte:head>
-
-<PageGrid>
-	{#snippet settings()}
-		<WorkspaceHeader
-			eyebrowA="PNG PROCESSING"
-			eyebrowB="WORKSPACE"
-			title="Build your image pipeline."
-			lede="Chain simple tools together. Every change is processed automatically and previewed at each stage."
-			file={{ name: "source.png", size: "1.8 MB" }}
-		/>
-
-		<SectionLabel
-			label="PROCESSING PIPELINE"
-			title="4 active steps"
-			meta="• LIVE"
-			unwrapActions
-		>
-			{#snippet actions()}
-				<button class="add-btn" onclick={() => {}}
-					><Plus size={15} /> Add tool</button
-				>
-			{/snippet}
-		</SectionLabel>
-
-		<div class="steps-list">
-			<StepCard
-				index={1}
-				type="BACKGROUND"
-				title="Gradient background"
-				onremove={() => {}}
-			>
-				{#snippet tools()}
-					<Badge tone="success" check label="AUTO" />
-				{/snippet}
-				<FieldGrid>
-					<ColorField label="COLOR" chevron bind:value={gradColor} />
-					<SliderField
-						label="DIRECTION"
-						bind:value={direction}
-						min={0}
-						max={360}
-						suffix=" °"
-					/>
-					<div class="control-block">
-						<label>OPACITY <output>{opacity}%</output></label>
-						<Segmented
-							bind:value={opacity}
-							options={[
-								{ value: "100", label: "100" },
-								{ value: "75", label: "75" },
-								{ value: "50", label: "50" },
-								{ value: "25", label: "25" },
-							]}
-						/>
-					</div>
-				</FieldGrid>
-			</StepCard>
-
-			<StepCard
-				index={2}
-				type="TRANSFORM"
-				title="Remove background"
-				onremove={() => {}}
-			>
-				{#snippet tools()}
-					<Badge tone="success" check label="AUTO" />
-				{/snippet}
-				<div class="transform-note">
-					<SlidersHorizontal size={15} /> Automatic subject detection enabled
-				</div>
-			</StepCard>
-
-			<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
-				{#snippet tools()}
-					<Badge tone="success" check label="AUTO" />
-				{/snippet}
-				<FieldGrid compact>
-					<SliderField
-						label="WIDTH"
-						bind:value={outlineWidth}
-						min={0}
-						max={8}
-						suffix=" px"
-					/>
-					<ColorField label="COLOR" dark bind:value={outlineColor} />
-				</FieldGrid>
-			</StepCard>
-
-			<StepCard
-				index={4}
-				type="STYLE"
-				title="Round corners"
-				onremove={() => {}}
-			>
-				{#snippet tools()}
-					<Badge tone="success" check label="AUTO" />
-				{/snippet}
-				<FieldGrid compact>
-					<SliderField
-						label="RADIUS"
-						bind:value={radius}
-						min={0}
-						max={48}
-						suffix=" px"
-					/>
-					<ToggleRow
-						label="Preserve aspect ratio"
-						bind:checked={preserveAspect}
-					/>
-				</FieldGrid>
-			</StepCard>
-		</div>
-
-		<PipelineFooter onreset={() => {}} />
-	{/snippet}
-
-	{#snippet preview()}
-		<section class="preview-panel">
-			<SectionLabel label="PIPELINE OUTPUTS" title="Visual history">
-				{#snippet actions()}
-					<button class="history-toggle" onclick={() => {}}>
-						Hide intermediate <ChevronDown size={15} />
-					</button>
-					<DownloadButton label="Download result" onclick={() => {}} />
-					<MetaList
-						items={[
-							{ caption: "DIMENSIONS", value: "1200 × 800 px" },
-							{ caption: "FORMAT", value: "PNG-24" },
-							{ caption: "SIZE", value: "1.2 MB" },
-						]}
-					/>
-					<IconButton
-						icon={Settings2}
-						label="Preview settings"
-						onclick={() => {}}
-					/>
-				{/snippet}
-			</SectionLabel>
-
-			<PreviewStack pad="16px 0">
-				{#each previewTiles as tile (tile.label)}
-					<PreviewTile
-						label={tile.label}
-						caption={tile.caption}
-						active={tile.active || false}
-					>
-						<div
-							class="image-preview"
-							style="background:{tile.bg}; border-radius:{tile.radius ??
-								'0'}; box-shadow:{tile.ring ?? 'none'};"
-						>
-							<span class="sample-icon">PNG</span>
-							<span>easy-png-tools</span>
-						</div>
-					</PreviewTile>
-				{/each}
-			</PreviewStack>
-
-			<p class="preview-note">
-				Output is generated in-browser. Your files never leave this device.
-			</p>
-		</section>
-	{/snippet}
-</PageGrid>
-
-<style>
-	.add-btn {
-		display: flex;
-		align-items: center;
-		gap: 7px;
-		color: var(--blue);
-		background: none;
-		border: 0;
-		font-size: 12px;
-		cursor: pointer;
-	}
-	.steps-list {
-		display: grid;
-		gap: 10px;
-		padding-top: 14px;
-	}
-	.transform-note {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--muted);
-		font: 11px var(--font-mono);
-	}
-	.preview-panel {
-		min-width: 0;
-		margin-top: 0;
-		border: 1px solid var(--line);
-		background: var(--panel);
-		align-self: start;
-		padding: 18px;
-		position: sticky;
-		top: 24px;
-	}
-	.history-toggle {
-		border: 1px solid var(--line);
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		letter-spacing: 0.04em;
-		background: 0 0;
-		justify-content: center;
-		align-items: center;
-		gap: 8px;
-		display: flex;
-		width: auto;
-		margin: 0;
-		padding: 8px 10px;
-		& :global(svg) {
-			transform: rotate(180deg);
-		}
-	}
-	.history-toggle:hover {
-		color: var(--foreground);
-		background: var(--background);
-	}
-	.image-preview {
-		min-width: 0;
-		max-width: 100%;
-		overflow: hidden;
-		aspect-ratio: 1.5;
-		color: #16202b;
-		width: 80%;
-		font: 600 10px var(--font-mono);
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		gap: 5px;
-		display: flex;
-	}
-	.sample-icon {
-		border: 1px solid;
-		padding: 3px 5px;
-		font-size: 9px;
-	}
-	.preview-note {
-		margin: 12px 0 0;
-		color: var(--muted);
-		font-size: 11px;
-		line-height: 1.5;
-	}
-	label {
-		color: var(--muted);
-		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		justify-content: space-between;
-		margin-bottom: 8px;
-		display: flex;
-		& output {
-			color: var(--foreground);
-		}
-	}
-</style>

web/src/routes/preview/kit/+page.svelte

@@ -10,7 +10,6 @@
 	import ImageCard from "$lib/components/kit/ImageCard.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import StatusLine from "$lib/components/kit/StatusLine.svelte";
@@ -24,8 +23,8 @@
 	import Toggle from "$lib/components/kit/ui/Toggle.svelte";
 	import { Download, ImageOff, Plus, Trash2 } from "@lucide/svelte";
 
-	import { TOOLS } from "$lib/registry-new";
 	import { TOOL_ICONS } from "$lib/preview/tool-icons";
+	import { TOOLS } from "$lib/registry-new";
 
 	let mode = $state("preview");
 	let radius = $state(8);
@@ -158,12 +157,6 @@
 			<ImageCard label="result.png · 512×512">
 				<CheckerCanvas size="sm" />
 			</ImageCard>
-			<PreviewTile label="tile-01" caption="caption-01">
-				<CheckerCanvas size="sm" />
-			</PreviewTile>
-			<PreviewTile label="tile-02" caption="caption-01">
-				<CheckerCanvas size="sm" />
-			</PreviewTile>
 		</div>
 		<SettingsFooter>
 			<MetaList
@@ -199,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;
@@ -211,9 +206,9 @@
 	}
 	.showcase-eyebrow {
 		font-family: var(--font-mono);
-		font-size: 12px;
+		font-size: var(--font-size-s);
-		letter-spacing: 0.18em;
+		letter-spacing: var(--space-text-2xl);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
 	.stack {
 		display: flex;
@@ -221,14 +216,17 @@
 	}
 	.tool-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
-		gap: 0.75rem;
+		gap: var(--space-l);
-		padding: 0.75rem 1rem;
+		padding: var(--space-l) var(--space-xl);
 	}
 	.preview-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		grid-template-columns: repeat(
-		gap: 0.75rem;
+			auto-fill,
-		padding: 0.75rem 1rem;
+			minmax(var(--size-card-min-narrow), 1fr)
+		);
+		gap: var(--space-l);
+		padding: var(--space-l) var(--space-xl);
 	}
 </style>

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;
+		margin-top: var(--space-page-top);
-		padding-top: 24px;
+		padding-top: var(--space-xxl);
-		border-top: 1px solid var(--line);
+		border-top: var(--size-border) solid var(--color-border);
-		font: 10px var(--font-mono);
+		font: var(--font-size-xs) var(--font-mono);
-		letter-spacing: 0.08em;
+		letter-spacing: var(--space-text-l);
-		color: var(--muted);
+		color: var(--color-text-muted);
 	}
-	@media (max-width: 800px) {
+	@media (--bp-tablet) {
 		.catalog-groups {
 			grid-template-columns: 1fr;
 		}

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>

web/stylelint.config.js

@@ -23,10 +23,10 @@ export default {
 		//   ^(brand-main|brand-alt)$                         — brand exceptions
 		//   |^(color|space|size|text|radius|bp|font)-        — prefixed
 		"custom-property-pattern": [
-			"^(brand-main|brand-alt)$|^(color|space|size|text|radius|bp|font)-",
+			"^(brand-main|brand-alt)$|^(color|space|size|text|radius|bp|font|duration|ease|z)-",
 			{
 				message:
-					'"%s" must be prefixed: --color-*, --space-*, --size-*, --text-*, --radius-*, --bp-*, --font-*; brand: only --brand-main/--brand-alt',
+					'"%s" must be prefixed: --color-*, --space-*, --size-*, --text-*, --radius-*, --bp-*, --font-*, --duration-*, --ease-*, --z-*; brand: only --brand-main/--brand-alt',
 			},
 		],
 		// Rule: !important is banned in CSS files. Overriding a look must happen