feat: some refactor, fix some design

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import MonoLabel from "./MonoLabel.svelte";
 
 	interface Props {
 		label: string;
@@ -10,7 +9,7 @@
 </script>
 
 <div class="preview-tile">
-	<MonoLabel>{label}</MonoLabel>
+	<span class="tile-label">{label}</span>
 	<div class="tile-canvas">{@render children()}</div>
 </div>
 
@@ -24,6 +23,12 @@
 		padding: 0.4rem;
 		background: var(--panel);
 	}
+	.tile-label {
+		font: 10px var(--font-mono);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--blue);
+	}
 	.tile-canvas {
 		border-radius: var(--radius);
 		overflow: hidden;

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

@@ -34,6 +34,7 @@
 <style>
 	.segmented {
 		display: inline-flex;
+		height: 32px;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		overflow: hidden;
@@ -44,11 +45,13 @@
 		background: transparent;
 		color: var(--muted);
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 10px;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		padding: 0.3rem 0.7rem;
+		padding: 0 0.7rem;
 		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
 	}
 	.segment + .segment {
 		border-left: 1px solid var(--line);

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { GripVertical, X } from "@lucide/svelte";
-	import Badge from "./Badge.svelte";
 
 	interface Props {
 		index: number;
@@ -17,7 +16,7 @@
 	<div class="step-heading">
 		<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
 		<span class="step-index">{index.toString().padStart(2, "0")}</span>
-		{#if type}<Badge tone="accent">{type}</Badge>{/if}
+		{#if type}<span class="step-type">{type}</span>{/if}
 		{#if title}<span class="step-title">{title}</span>{/if}
 		<button
 			type="button"
@@ -54,13 +53,18 @@
 	.step-index {
 		font-family: var(--font-mono);
 		font-size: 11px;
-		color: var(--muted);
+		color: var(--blue);
 	}
 	.step-title {
-		font-weight: 600;
-		font-size: 0.9rem;
+		font: 600 15px var(--font-mono);
 		color: var(--foreground);
-		flex: 1;
+		margin: 0;
+	}
+	.step-type {
+		color: var(--muted);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
 	}
 	.step-remove {
 		margin-left: auto;

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

@@ -55,6 +55,7 @@
 		align-items: center;
 		gap: 10px;
 		font: 600 14px var(--font-mono);
+		color: var(--foreground);
 	}
 	.brand-mark {
 		background: var(--blue);