diff --git a/web/src/lib/components/kit/Panel.svelte b/web/src/lib/components/kit/layout/Panel.svelte
similarity index 65%
rename from web/src/lib/components/kit/Panel.svelte
rename to web/src/lib/components/kit/layout/Panel.svelte
index 1c96b14..10abc0f 100644
--- a/web/src/lib/components/kit/Panel.svelte
+++ b/web/src/lib/components/kit/layout/Panel.svelte
@@ -13,8 +13,8 @@
 
 <style>
 	.panel {
-		background: var(--panel);
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
+		background: var(--color-panel);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
 	}
 </style>
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index 55ee73e..f23fb08 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Panel from "$lib/components/kit/Panel.svelte";
+	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import TextField from "$lib/components/kit/TextField.svelte";
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 1ad114e..51690b6 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -5,8 +5,8 @@
 	import ColorField from "$lib/components/kit/ColorField.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	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 Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import Segmented from "$lib/components/kit/Segmented.svelte";
diff --git a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
index ae5e809..0aadd3f 100644
--- a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
@@ -2,8 +2,8 @@
 	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 Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
diff --git a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
index 4bac83d..6c1ff49 100644
--- a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
-	import Panel from "$lib/components/kit/Panel.svelte";
+	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";