diff --git a/web/src/lib/components/kit/MonoLabel.svelte b/web/src/lib/components/kit/MonoLabel.svelte
index a9bb60a..6156841 100644
--- a/web/src/lib/components/kit/MonoLabel.svelte
+++ b/web/src/lib/components/kit/MonoLabel.svelte
@@ -17,15 +17,13 @@
 
 <style>
 	.mono-label {
-		font-family: var(--font-mono);
-		font-size: 10px;
-		font-weight: 400;
-		letter-spacing: 0.12em;
-		color: var(--muted);
+		font: normal var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-text-muted);
 		line-height: normal;
 	}
 
 	.accent {
-		color: var(--blue);
+		color: var(--color-accent);
 	}
 </style>
diff --git a/web/src/lib/components/kit/layout/Field.svelte b/web/src/lib/components/kit/layout/Field.svelte
index 6c18bb1..89a61db 100644
--- a/web/src/lib/components/kit/layout/Field.svelte
+++ b/web/src/lib/components/kit/layout/Field.svelte
@@ -29,7 +29,7 @@
 	}
 	.field-hint {
 		font-family: var(--font-mono);
-		font-size: var(--font-text);
+		font-size: var(--font-size-s);
 		color: var(--color-text-muted);
 	}
 </style>
diff --git a/web/src/lib/components/kit/layout/Footer.svelte b/web/src/lib/components/kit/layout/Footer.svelte
index 11e1d71..2e0d5b3 100644
--- a/web/src/lib/components/kit/layout/Footer.svelte
+++ b/web/src/lib/components/kit/layout/Footer.svelte
@@ -14,7 +14,7 @@
 		justify-content: space-between;
 		padding: var(--space-xl);
 		border-top: var(--size-border) solid var(--color-border);
-		font: var(--font-text) var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
 		color: var(--color-text-muted);
 		& span {
 			display: flex;
diff --git a/web/src/lib/components/kit/layout/TopBar.svelte b/web/src/lib/components/kit/layout/TopBar.svelte
index e906679..b7e1f51 100644
--- a/web/src/lib/components/kit/layout/TopBar.svelte
+++ b/web/src/lib/components/kit/layout/TopBar.svelte
@@ -18,7 +18,7 @@
 		<span class="brand-mark">EP</span>
 		<span>easy-png-tools</span>
 		{#if crumb}
-			<span class="version">{crumb}</span>
+			<span class="crumb">{crumb}</span>
 		{/if}
 	</a>
 	<TopNav />
@@ -41,7 +41,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--space-m);
-		font: bold var(--font-button) var(--font-mono);
+		font: bold var(--font-size-l) var(--font-mono);
 		color: var(--color-text);
 		text-decoration: none;
 	}
@@ -50,12 +50,12 @@
 		color: var(--color-background);
 		width: var(--space-brand);
 		height: var(--space-brand);
-		font-size: var(--font-brand);
+		font-size: var(--font-size-m);
 		display: grid;
 		place-items: center;
 	}
-	.version {
-		font: var(--font-text) var(--font-mono);
+	.crumb {
+		font: var(--font-size-s) var(--font-mono);
 		letter-spacing: var(--space-text-l);
 		color: var(--color-main);
 	}
diff --git a/web/src/lib/components/kit/ui/Badge.svelte b/web/src/lib/components/kit/ui/Badge.svelte
index 97fe329..5cb615e 100644
--- a/web/src/lib/components/kit/ui/Badge.svelte
+++ b/web/src/lib/components/kit/ui/Badge.svelte
@@ -47,7 +47,7 @@
 		gap: var(--space-s);
 		line-height: normal;
 		font-family: var(--font-mono);
-		font-size: var(--font-text);
+		font-size: var(--font-size-s);
 		font-weight: bold;
 		border-width: var(--size-border-thick);
 		padding: var(--space-s) var(--space-m);
diff --git a/web/src/lib/components/kit/ui/Button.svelte b/web/src/lib/components/kit/ui/Button.svelte
index f19939d..49817a1 100644
--- a/web/src/lib/components/kit/ui/Button.svelte
+++ b/web/src/lib/components/kit/ui/Button.svelte
@@ -44,7 +44,7 @@
 		border-color: var(--color-main);
 		border-width: var(--size-border-thick);
 		border-radius: var(--radius-s);
-		font-size: var(--font-button);
+		font-size: var(--font-size-l);
 		font-weight: bold;
 		cursor: pointer;
 		background: var(--color-main);
diff --git a/web/src/lib/components/kit/ui/TopNav.svelte b/web/src/lib/components/kit/ui/TopNav.svelte
index 22c871b..e94e74a 100644
--- a/web/src/lib/components/kit/ui/TopNav.svelte
+++ b/web/src/lib/components/kit/ui/TopNav.svelte
@@ -21,7 +21,7 @@
 	}
 	.nav a {
 		color: var(--color-text);
-		font: bold var(--font-text) var(--font-mono);
+		font: bold var(--font-size-s) var(--font-mono);
 		white-space: nowrap;
 		text-decoration: none;
 	}
diff --git a/web/src/preview.css b/web/src/preview.css
index f2a2b59..29c607f 100644
--- a/web/src/preview.css
+++ b/web/src/preview.css
@@ -133,15 +133,16 @@
 		--space-brand: 32px;
 
 		--space-text-s: 0;
-		--space-text-m: 0.06em;
-		--space-text-l: 0.12em;
+		--space-text-m: 0.04em;
+		--space-text-l: 0.08em;
+		--space-text-xl: 0.12em;
 
 		--size-border: 1px;
 		--size-border-thick: 2px;
 
-		--font-text: 10px;
-		--font-brand: 12px;
-		--font-button: 14px;
+		--font-size-s: 12px;
+		--font-size-m: 14px;
+		--font-size-l: 16px;
 
 		--radius-s: 0px;
 		--radius-m: 4px;