diff --git a/.gitignore b/.gitignore
index 2e0dbad..6b9d3d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ refs/public/placeholder-logo.svg
 refs/public/placeholder-logo.png
 refs/public/placeholder.svg
 web/audit/cdp-audit*.txt
+css-lint.txt
diff --git a/web/src/lib/components/kit/NumberField.svelte b/web/src/lib/components/kit/NumberField.svelte
index 424e47d..21e719a 100644
--- a/web/src/lib/components/kit/NumberField.svelte
+++ b/web/src/lib/components/kit/NumberField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Field from "./Field.svelte";
+	import Field from "./layout/Field.svelte";
 
 	interface Props {
 		label: string;
diff --git a/web/src/lib/components/kit/SelectField.svelte b/web/src/lib/components/kit/SelectField.svelte
index 1995251..54ff040 100644
--- a/web/src/lib/components/kit/SelectField.svelte
+++ b/web/src/lib/components/kit/SelectField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Field from "./Field.svelte";
+	import Field from "./layout/Field.svelte";
 
 	interface Option {
 		value: string;
diff --git a/web/src/lib/components/kit/Field.svelte b/web/src/lib/components/kit/layout/Field.svelte
similarity index 77%
rename from web/src/lib/components/kit/Field.svelte
rename to web/src/lib/components/kit/layout/Field.svelte
index 4a47d9c..6c18bb1 100644
--- a/web/src/lib/components/kit/Field.svelte
+++ b/web/src/lib/components/kit/layout/Field.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import MonoLabel from "./MonoLabel.svelte";
+	import MonoLabel from "../MonoLabel.svelte";
 
 	interface Props {
 		label: string;
@@ -20,16 +20,16 @@
 	.field {
 		display: flex;
 		flex-direction: column;
-		gap: 0.3rem;
+		gap: var(--space-s);
 	}
 	.field-control {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-m);
 	}
 	.field-hint {
 		font-family: var(--font-mono);
-		font-size: 10px;
-		color: var(--muted);
+		font-size: var(--font-text);
+		color: var(--color-text-muted);
 	}
 </style>