diff --git a/.changeset/sixty-papayas-march.md b/.changeset/sixty-papayas-march.md
new file mode 100644
index 0000000000..bf512c5608
--- /dev/null
+++ b/.changeset/sixty-papayas-march.md
@@ -0,0 +1,7 @@
+---
+'@directus/themes': minor
+'docs': minor
+'@directus/app': minor
+---
+
+Added support for configurable borders
diff --git a/app/src/components/v-avatar.vue b/app/src/components/v-avatar.vue
index 54f1ea66bc..6256634206 100644
--- a/app/src/components/v-avatar.vue
+++ b/app/src/components/v-avatar.vue
@@ -47,7 +47,7 @@ body {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	background-color: var(--v-avatar-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .tile {
diff --git a/app/src/components/v-button.vue b/app/src/components/v-button.vue
index 53c3000468..603cc3c492 100644
--- a/app/src/components/v-button.vue
+++ b/app/src/components/v-button.vue
@@ -279,8 +279,8 @@ async function onClick(event: MouseEvent) {
 	line-height: var(--v-button-line-height);
 	text-decoration: none;
 	background-color: var(--v-button-background-color);
-	border: var(--border-width) solid var(--v-button-background-color);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--v-button-background-color);
+	border-radius: var(--theme--border-radius);
 	cursor: pointer;
 	transition: var(--fast) var(--transition);
 	transition-property: background-color border;
@@ -312,7 +312,7 @@ async function onClick(event: MouseEvent) {
 .button:disabled {
 	color: var(--v-button-color-disabled);
 	background-color: var(--v-button-background-color-disabled);
-	border: var(--border-width) solid var(--v-button-background-color-disabled);
+	border: var(--theme--border-width) solid var(--v-button-background-color-disabled);
 	cursor: not-allowed;
 }
 
@@ -351,7 +351,6 @@ async function onClick(event: MouseEvent) {
 	--v-button-font-size: 12px;
 	--v-button-font-weight: 600;
 	--v-button-min-width: 60px;
-	--border-radius: 4px;
 
 	padding: 0 12px;
 }
diff --git a/app/src/components/v-card.vue b/app/src/components/v-card.vue
index 0a60a2b60a..6d24936c58 100644
--- a/app/src/components/v-card.vue
+++ b/app/src/components/v-card.vue
@@ -32,7 +32,6 @@ body {
 
 <style lang="scss" scoped>
 .v-card {
-	--border-radius: 6px;
 	--input-height: 60px;
 	--input-padding: 16px; /* (60 - 4 - 24) / 2 */
 	--form-vertical-gap: 52px;
@@ -48,11 +47,11 @@ body {
 	font-size: 15px;
 	line-height: 24px;
 	background-color: var(--v-card-background-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	& > :first-child {
-		border-top-left-radius: var(--border-radius);
-		border-top-right-radius: var(--border-radius);
+		border-top-left-radius: var(--theme--border-radius);
+		border-top-right-radius: var(--theme--border-radius);
 	}
 
 	&.disabled {
diff --git a/app/src/components/v-checkbox.vue b/app/src/components/v-checkbox.vue
index 9836e734d2..478176874b 100644
--- a/app/src/components/v-checkbox.vue
+++ b/app/src/components/v-checkbox.vue
@@ -143,7 +143,7 @@ body {
 			width: 100%;
 			background-color: transparent;
 			border: none;
-			border-bottom: 2px solid var(--border-normal);
+			border-bottom: 2px solid var(--theme--form--field--input--border-color);
 			border-radius: 0;
 		}
 
@@ -174,8 +174,8 @@ body {
 		height: var(--input-height);
 		padding: 10px; // 14 - 4 (border)
 		background-color: var(--theme--background);
-		border: var(--border-width) solid var(--border-normal);
-		border-radius: var(--border-radius);
+		border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+		border-radius: var(--theme--border-radius);
 		transition: all var(--fast) var(--transition);
 
 		&:disabled {
@@ -189,7 +189,7 @@ body {
 			z-index: 0;
 			width: 100%;
 			height: 100%;
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 			content: '';
 		}
 
@@ -205,7 +205,7 @@ body {
 
 		&.block {
 			background-color: var(--background-subdued);
-			border-color: var(--border-normal-alt);
+			border-color: var(--theme--form--field--input--border-color-hover);
 		}
 	}
 
diff --git a/app/src/components/v-chip.vue b/app/src/components/v-chip.vue
index eafc385602..b9fb94d1dd 100644
--- a/app/src/components/v-chip.vue
+++ b/app/src/components/v-chip.vue
@@ -101,7 +101,7 @@ body {
 	font-weight: var(--weight-normal);
 	line-height: 22px;
 	background-color: var(--v-chip-background-color);
-	border: var(--border-width) solid var(--v-chip-background-color);
+	border: var(--theme--border-width) solid var(--v-chip-background-color);
 	border-radius: 16px;
 
 	&.clickable:hover {
@@ -156,7 +156,7 @@ body {
 	}
 
 	&.label {
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	.chip-content {
diff --git a/app/src/components/v-divider.vue b/app/src/components/v-divider.vue
index e0d76f024b..feb91a3b08 100644
--- a/app/src/components/v-divider.vue
+++ b/app/src/components/v-divider.vue
@@ -27,7 +27,7 @@ withDefaults(defineProps<Props>(), {
 
 <style>
 body {
-	--v-divider-color: var(--border-normal);
+	--v-divider-color: var(--theme--form--field--input--border-color);
 	--v-divider-label-color: var(--theme--foreground-accent);
 }
 </style>
@@ -48,7 +48,7 @@ body {
 		margin-top: 8px;
 		border: solid;
 		border-color: var(--v-divider-color);
-		border-width: var(--border-width) 0 0 0;
+		border-width: var(--theme--border-width) 0 0 0;
 	}
 
 	span.wrapper {
@@ -98,7 +98,7 @@ body {
 		hr {
 			width: 0px;
 			max-width: 0px;
-			border-width: 0 var(--border-width) 0 0;
+			border-width: 0 var(--theme--border-width) 0 0;
 		}
 
 		span.wrapper {
diff --git a/app/src/components/v-drawer.vue b/app/src/components/v-drawer.vue
index f2befd0f19..f4ffa73cd1 100644
--- a/app/src/components/v-drawer.vue
+++ b/app/src/components/v-drawer.vue
@@ -170,7 +170,6 @@ body {
 	}
 
 	.content {
-		--border-radius: 6px;
 		--input-height: 60px;
 		--input-padding: 16px; /* (60 - 4 - 24) / 2 */
 		--form-vertical-gap: 52px;
@@ -247,7 +246,7 @@ body {
 
 	nav {
 		background-color: var(--background-subdued);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	@media (min-width: 960px) {
diff --git a/app/src/components/v-error.vue b/app/src/components/v-error.vue
index a8b5239fcf..9a41463d3f 100644
--- a/app/src/components/v-error.vue
+++ b/app/src/components/v-error.vue
@@ -65,7 +65,7 @@ async function copyError() {
 	color: var(--theme--danger);
 	font-family: var(--theme--font-family-monospace);
 	background-color: var(--danger-alt);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	.copy-error {
 		margin-left: 12px;
diff --git a/app/src/components/v-fancy-select.vue b/app/src/components/v-fancy-select.vue
index 5bec209e49..95c2d97a2d 100644
--- a/app/src/components/v-fancy-select.vue
+++ b/app/src/components/v-fancy-select.vue
@@ -99,7 +99,7 @@ function toggle(item: Record<string, any>) {
 	margin-bottom: 8px;
 	padding: 12px;
 	background-color: var(--background-normal);
-	border: 2px solid var(--background-normal);
+	border: var(--theme--border-width) solid var(--background-normal);
 	border-radius: 6px;
 	backface-visibility: hidden;
 	cursor: pointer;
@@ -138,14 +138,14 @@ function toggle(item: Record<string, any>) {
 		z-index: 2;
 		color: var(--theme--primary);
 		background-color: var(--theme--primary-background);
-		border-color: var(--theme--primary);
+		border-color: var(--theme--form--field--input--border-color-focus);
 
 		.v-icon {
 			--v-icon-color: var(--theme--primary);
 		}
 
 		&:hover {
-			border-color: var(--theme--primary);
+			border-color: var(--theme--form--field--input--border-color-focus);
 		}
 	}
 }
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 5e5847bc25..bcb02cbcf9 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -321,7 +321,7 @@ function setContent() {
 	padding: 2px 4px 0;
 	color: var(--theme--primary);
 	background-color: var(--theme--primary-background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: background-color, color;
 	user-select: none;
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 9575b4b016..1455582b8d 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -241,7 +241,7 @@ function useComputedValues() {
 	margin: -12px;
 	padding: 12px;
 	background-color: var(--danger-alt);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: var(--medium) var(--transition);
 	transition-property: background-color, padding, margin;
 }
diff --git a/app/src/components/v-input.vue b/app/src/components/v-input.vue
index fe4bcfe071..5c843c9b98 100644
--- a/app/src/components/v-input.vue
+++ b/app/src/components/v-input.vue
@@ -283,14 +283,16 @@ function stepDown() {
 :global(body) {
 	--v-input-font-family: var(--theme--font-family-sans-serif);
 	--v-input-placeholder-color: var(--theme--foreground-subdued);
-	--v-input-box-shadow-color-focus: var(--theme--primary);
 	--v-input-color: var(--theme--foreground);
 	--v-input-background-color: var(--theme--form--field--input--background);
-	--v-input-border-color-focus: var(--theme--primary);
+	--v-input-border-color: var(--theme--form--field--input--border-color);
+	--v-input-border-color-hover: var(--theme--form--field--input--border-color-hover);
+	--v-input-border-color-focus: var(--theme--form--field--input--border-color-focus);
+	--v-input-border-radius: var(--theme--border-radius);
 }
 
 .v-input {
-	--arrow-color: var(--border-normal);
+	--arrow-color: var(--theme--form--field--input--border-color);
 	--v-icon-color: var(--theme--foreground-subdued);
 
 	display: flex;
@@ -314,9 +316,11 @@ function stepDown() {
 		color: var(--v-input-color);
 		font-family: var(--v-input-font-family);
 		background-color: var(--v-input-background-color);
-		border: var(--border-width) solid var(--border-normal);
-		border-radius: var(--border-radius);
-		transition: border-color var(--fast) var(--transition);
+		border: var(--theme--border-width) solid var(--v-input-border-color);
+		border-radius: var(--v-input-border-radius);
+		transition: var(--fast) var(--transition);
+		transition-property: border-color, box-shadow;
+		box-shadow: var(--theme--form--field--input--box-shadow);
 
 		.prepend {
 			margin-right: 8px;
@@ -345,36 +349,37 @@ function stepDown() {
 			}
 
 			&.disabled {
-				--arrow-color: var(--border-normal);
+				--arrow-color: var(--v-input-border-color);
 
 				cursor: auto;
 			}
 		}
 
 		&:hover {
-			--arrow-color: var(--border-normal-alt);
+			--arrow-color: var(--v-input-border-color-hover);
 
 			color: var(--v-input-color);
 			background-color: var(--theme--form--field--input--background);
-			border-color: var(--border-normal-alt);
+			border-color: var(--v-input-border-color-hover);
+			box-shadow: var(--theme--form--field--input--box-shadow-hover);
 		}
 
 		&:focus-within,
 		&.active {
-			--arrow-color: var(--border-normal-alt);
+			--arrow-color: var(--v-input-border-color-hover);
 
 			color: var(--v-input-color);
 			background-color: var(--theme--form--field--input--background);
 			border-color: var(--v-input-border-color-focus);
-			box-shadow: 0 0 16px -8px var(--v-input-box-shadow-color-focus);
+			box-shadow: var(--theme--form--field--input--box-shadow-focus);
 		}
 
 		&.disabled {
-			--arrow-color: var(--border-normal);
+			--arrow-color: var(--v-input-border-color);
 
 			color: var(--theme--foreground-subdued);
 			background-color: var(--background-subdued);
-			border-color: var(--border-normal);
+			border-color: var(--v-input-border-color);
 		}
 
 		.prefix,
diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index dabdb96903..ca0b0a9afb 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -143,9 +143,9 @@ body {
 	--v-list-item-min-height-nav: 36px;
 	--v-list-item-min-height: 32px;
 	--v-list-item-max-height: auto;
-	--v-list-item-border-radius: var(--border-radius);
+	--v-list-item-border-radius: var(--theme--border-radius);
 	--v-list-item-border-color: var(--border-subdued);
-	--v-list-item-border-color-hover: var(--border-normal-alt);
+	--v-list-item-border-color-hover: var(--theme--form--field--input--border-color-hover);
 	--v-list-item-color: var(--v-list-color, var(--theme--foreground));
 	--v-list-item-color-hover: var(--v-list-color-hover, var(--theme--foreground));
 	--v-list-item-color-active: var(--v-list-color-active, var(--theme--foreground));
@@ -185,7 +185,7 @@ body {
 			left: 0;
 			width: calc(100% - 4px);
 			height: calc(100% - 4px);
-			border: 2px dashed var(--border-normal);
+			border: 2px dashed var(--theme--form--field--input--border-color);
 			content: '';
 			pointer-events: none;
 		}
@@ -252,8 +252,8 @@ body {
 		margin: 0;
 		padding: 8px var(--input-padding);
 		background-color: var(--v-list-item-background-color);
-		border: var(--border-width) solid var(--v-list-item-border-color);
-		border-radius: var(--border-radius);
+		border: var(--theme--border-width) solid var(--v-list-item-border-color);
+		border-radius: var(--theme--border-radius);
 		transition: border-color var(--fast) var(--transition);
 
 		:slotted(.drag-handle) {
@@ -274,11 +274,11 @@ body {
 
 		&.clickable:hover {
 			background-color: var(--v-list-item-background-color-hover);
-			border: var(--border-width) solid var(--v-list-item-border-color-hover);
+			border: var(--theme--border-width) solid var(--v-list-item-border-color-hover);
 		}
 
 		&.sortable-chosen {
-			border: var(--border-width) solid var(--theme--primary) !important;
+			border: var(--theme--border-width) solid var(--theme--primary) !important;
 		}
 
 		&.sortable-ghost {
diff --git a/app/src/components/v-list.vue b/app/src/components/v-list.vue
index e89e0cb062..29a7e3d7ad 100644
--- a/app/src/components/v-list.vue
+++ b/app/src/components/v-list.vue
@@ -57,7 +57,7 @@ useGroupableParent(
 <style scoped>
 :global(body) {
 	--v-list-padding: 4px 0;
-	--v-list-border-radius: var(--border-radius);
+	--v-list-border-radius: var(--theme--border-radius);
 	--v-list-max-height: none;
 	--v-list-max-width: none;
 	--v-list-min-width: 220px;
diff --git a/app/src/components/v-menu.vue b/app/src/components/v-menu.vue
index 2de66b4114..71a4882051 100644
--- a/app/src/components/v-menu.vue
+++ b/app/src/components/v-menu.vue
@@ -494,7 +494,7 @@ body {
 	overflow-y: auto;
 	background-color: var(--card-face-color);
 	border: none;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2), 0px 0px 12px 2px rgb(var(--card-shadow-color), 0.05);
 	transition-timing-function: var(--transition-out);
 	transition-duration: var(--fast);
diff --git a/app/src/components/v-notice.vue b/app/src/components/v-notice.vue
index b0d09d5f59..7a7f7dba84 100644
--- a/app/src/components/v-notice.vue
+++ b/app/src/components/v-notice.vue
@@ -61,7 +61,7 @@ const iconName = computed(() => {
 	color: var(--v-notice-color);
 	line-height: 22px;
 	background-color: var(--v-notice-background-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	overflow: hidden;
 }
 
diff --git a/app/src/components/v-progress-circular.vue b/app/src/components/v-progress-circular.vue
index 18e6a2e9a6..ad38123d0b 100644
--- a/app/src/components/v-progress-circular.vue
+++ b/app/src/components/v-progress-circular.vue
@@ -58,7 +58,7 @@ const circleStyle = computed(() => ({
 <style>
 body {
 	--v-progress-circular-color: var(--theme--foreground);
-	--v-progress-circular-background-color: var(--border-normal);
+	--v-progress-circular-background-color: var(--theme--form--field--input--border-color);
 	--v-progress-circular-transition: 400ms;
 	--v-progress-circular-speed: 2s;
 	--v-progress-circular-size: 28px;
diff --git a/app/src/components/v-progress-linear.vue b/app/src/components/v-progress-linear.vue
index cec4748da9..da2ce63b26 100644
--- a/app/src/components/v-progress-linear.vue
+++ b/app/src/components/v-progress-linear.vue
@@ -71,7 +71,7 @@ const color = computed(() => {
 body {
 	--v-progress-linear-height: 4px;
 	--v-progress-linear-color: var(--theme--foreground);
-	--v-progress-linear-background-color: var(--border-normal);
+	--v-progress-linear-background-color: var(--theme--form--field--input--border-color);
 	--v-progress-linear-transition: 400ms;
 }
 </style>
diff --git a/app/src/components/v-radio.vue b/app/src/components/v-radio.vue
index cc4d051ed0..b91005713d 100644
--- a/app/src/components/v-radio.vue
+++ b/app/src/components/v-radio.vue
@@ -103,9 +103,9 @@ body {
 		position: relative;
 		width: 100%;
 		height: var(--input-height);
-		padding: 10px; // 14 - 4 (border)
-		border: 2px solid var(--background-subdued);
-		border-radius: var(--border-radius);
+		padding: calc(14px - 2 * var(--theme--border-width));
+		border: var(--theme--border-width) solid var(--background-subdued);
+		border-radius: var(--theme--border-radius);
 
 		&::before {
 			position: absolute;
@@ -114,7 +114,7 @@ body {
 			width: 100%;
 			height: 100%;
 			background-color: var(--background-subdued);
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 			content: '';
 		}
 
diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
index 79b7230c26..82711b1c61 100644
--- a/app/src/components/v-select/v-select.vue
+++ b/app/src/components/v-select/v-select.vue
@@ -418,7 +418,7 @@ function useDisplayValue() {
 	padding-right: 26px;
 	color: var(--theme--foreground-subdued);
 	background-color: var(--background-subdued);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: color var(--fast) var(--transition);
 
 	&:hover,
diff --git a/app/src/components/v-sheet.vue b/app/src/components/v-sheet.vue
index ef0db684eb..82ae1b8193 100644
--- a/app/src/components/v-sheet.vue
+++ b/app/src/components/v-sheet.vue
@@ -26,6 +26,6 @@
 	padding: var(--v-sheet-padding);
 	overflow: auto;
 	background-color: var(--v-sheet-background-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 </style>
diff --git a/app/src/components/v-skeleton-loader.vue b/app/src/components/v-skeleton-loader.vue
index 131fdddac0..712298052d 100644
--- a/app/src/components/v-skeleton-loader.vue
+++ b/app/src/components/v-skeleton-loader.vue
@@ -62,8 +62,8 @@ body {
 .input-tall {
 	width: 100%;
 	height: var(--input-height);
-	border: var(--border-width) solid var(--v-skeleton-loader-background-color);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--v-skeleton-loader-background-color);
+	border-radius: var(--theme--border-radius);
 
 	@include loader;
 }
@@ -75,7 +75,7 @@ body {
 .block-list-item {
 	width: 100%;
 	height: var(--input-height);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	@include loader;
 
@@ -87,7 +87,7 @@ body {
 .block-list-item-dense {
 	width: 100%;
 	height: 44px;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	@include loader;
 
diff --git a/app/src/components/v-slider.vue b/app/src/components/v-slider.vue
index 02091709f9..64b5328c1c 100644
--- a/app/src/components/v-slider.vue
+++ b/app/src/components/v-slider.vue
@@ -88,7 +88,7 @@ function onInput(event: Event) {
 
 <style>
 body {
-	--v-slider-color: var(--border-normal);
+	--v-slider-color: var(--theme--form--field--input--border-color);
 	--v-slider-thumb-color: var(--theme--primary);
 	--v-slider-fill-color: var(--theme--primary);
 }
@@ -232,7 +232,7 @@ body {
 			color: var(--foreground-inverted);
 			font-weight: 600;
 			background-color: var(--theme--primary);
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 			transform: translateX(-50%);
 			opacity: 0;
 			transition: opacity var(--fast) var(--transition);
diff --git a/app/src/components/v-table/table-header.vue b/app/src/components/v-table/table-header.vue
index ea02ac572b..bd43a8d0aa 100644
--- a/app/src/components/v-table/table-header.vue
+++ b/app/src/components/v-table/table-header.vue
@@ -279,7 +279,7 @@ function toggleManualSort() {
 		font-weight: 500;
 		font-size: 14px;
 		background-color: var(--v-table-background-color);
-		border-bottom: var(--border-width) solid var(--border-subdued);
+		border-bottom: var(--theme--border-width) solid var(--border-subdued);
 
 		&.select,
 		&.manual {
@@ -395,7 +395,7 @@ function toggleManualSort() {
 			top: 20%;
 			left: 3px;
 			display: block;
-			width: var(--border-width);
+			width: var(--theme--border-width);
 			height: 60%;
 			background-color: var(--border-subdued);
 			content: '';
diff --git a/app/src/components/v-table/table-row.vue b/app/src/components/v-table/table-row.vue
index 35412e100c..b67abf8634 100644
--- a/app/src/components/v-table/table-row.vue
+++ b/app/src/components/v-table/table-row.vue
@@ -87,7 +87,7 @@ const cssHeight = computed(() => {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background-color: var(--v-table-background-color);
-		border-bottom: var(--border-width) solid var(--border-subdued);
+		border-bottom: var(--theme--border-width) solid var(--border-subdued);
 
 		&:last-child {
 			padding: 0 12px;
diff --git a/app/src/components/v-table/v-table.vue b/app/src/components/v-table/v-table.vue
index 6f1c26e1cb..9e6c9d6c49 100644
--- a/app/src/components/v-table/v-table.vue
+++ b/app/src/components/v-table/v-table.vue
@@ -429,7 +429,7 @@ table :deep(.sortable-ghost .cell) {
 
 .loading .loading-indicator .v-progress-linear {
 	--v-progress-linear-height: 2px;
-	--v-progress-linear-color: var(--border-normal-alt);
+	--v-progress-linear-color: var(--theme--form--field--input--border-color-hover);
 
 	position: absolute;
 	top: -2px;
@@ -460,8 +460,8 @@ table :deep(.sortable-ghost .cell) {
 }
 
 .inline {
-	border: 2px solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 
 .inline table :deep(.table-row:last-of-type .cell) {
diff --git a/app/src/components/v-template-input.vue b/app/src/components/v-template-input.vue
index ba0ba3828d..402d25addc 100644
--- a/app/src/components/v-template-input.vue
+++ b/app/src/components/v-template-input.vue
@@ -313,8 +313,8 @@ function parseHTML(innerText?: string, isDirectInput = false) {
 	font-family: var(--theme--font-family-sans-serif);
 	white-space: nowrap;
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: border-color var(--fast) var(--transition);
 
 	&:empty::before {
@@ -330,11 +330,11 @@ function parseHTML(innerText?: string, isDirectInput = false) {
 	}
 
 	&:hover {
-		border-color: var(--border-normal-alt);
+		border-color: var(--theme--form--field--input--border-color-hover);
 	}
 
 	&:focus-within {
-		border-color: var(--theme--primary);
+		border-color: var(--theme--form--field--input--border-color-focus);
 	}
 
 	:deep(.preview) {
@@ -346,7 +346,7 @@ function parseHTML(innerText?: string, isDirectInput = false) {
 		line-height: 1;
 		vertical-align: -2px;
 		background: var(--theme--primary-background);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		user-select: text;
 
 		&::before {
diff --git a/app/src/components/v-textarea.vue b/app/src/components/v-textarea.vue
index e4e44df075..463e0cf963 100644
--- a/app/src/components/v-textarea.vue
+++ b/app/src/components/v-textarea.vue
@@ -99,9 +99,11 @@ body {
 	min-height: var(--v-textarea-min-height);
 	max-height: var(--v-textarea-max-height);
 	background-color: var(--theme--form--field--input--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
-	transition: border-color var(--fast) var(--transition);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
+	transition: var(--fast) var(--transition);
+	transition-property: border-color, box-shadow;
+	box-shadow: var(--theme--form--field--input--box-shadow);
 
 	.append,
 	.prepend {
@@ -137,13 +139,14 @@ body {
 	}
 
 	&:hover:not(.disabled) {
-		border-color: var(--border-normal-alt);
+		border-color: var(--theme--form--field--input--border-color-hover);
+		box-shadow: var(--theme--form--field--input--box-shadow-hover);
 	}
 
 	&:focus:not(.disabled),
 	&:focus-within:not(.disabled) {
-		border-color: var(--theme--primary);
-		box-shadow: 0 0 16px -8px var(--theme--primary);
+		border-color: var(--theme--form--field--input--border-color-focus);
+		box-shadow: var(--theme--form--field--input--box-shadow-focus);
 	}
 
 	textarea {
diff --git a/app/src/components/v-upload.vue b/app/src/components/v-upload.vue
index 7c4eb27657..a423d1e69e 100644
--- a/app/src/components/v-upload.vue
+++ b/app/src/components/v-upload.vue
@@ -330,8 +330,8 @@ function openFileBrowser() {
 	padding: 32px;
 	color: var(--theme--foreground-subdued);
 	text-align: center;
-	border: 2px dashed var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px dashed var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: color, border-color, background-color;
 
@@ -340,7 +340,7 @@ function openFileBrowser() {
 	}
 
 	&:not(.uploading):hover {
-		border-color: var(--border-normal-alt);
+		border-color: var(--theme--form--field--input--border-color-hover);
 	}
 }
 
@@ -373,7 +373,7 @@ function openFileBrowser() {
 .dragging {
 	color: var(--theme--primary);
 	background-color: var(--theme--primary-background);
-	border-color: var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
 
 	* {
 		pointer-events: none;
@@ -392,7 +392,7 @@ function openFileBrowser() {
 
 	color: var(--white);
 	background-color: var(--theme--primary);
-	border-color: var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
 	border-style: solid;
 
 	.v-progress-linear {
diff --git a/app/src/components/v-workspace-tile.vue b/app/src/components/v-workspace-tile.vue
index d85cbed9ab..cbb4cb2cf8 100644
--- a/app/src/components/v-workspace-tile.vue
+++ b/app/src/components/v-workspace-tile.vue
@@ -350,19 +350,19 @@ function useDragDrop() {
 
 	&.editing {
 		&.draggable {
-			border-color: var(--border-normal);
-			box-shadow: 0 0 0 1px var(--border-normal);
+			border-color: var(--theme--form--field--input--border-color);
+			box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color);
 			cursor: move;
 		}
 
 		&.draggable:hover {
-			border-color: var(--border-normal-alt);
-			box-shadow: 0 0 0 1px var(--border-normal-alt);
+			border-color: var(--theme--form--field--input--border-color-hover);
+			box-shadow: 0 0 0 1px var(--theme--form--field--input--border-color-hover);
 		}
 
 		&.dragging {
 			z-index: 3 !important;
-			border-color: var(--theme--primary);
+			border-color: var(--theme--form--field--input--border-color-focus);
 			box-shadow: 0 0 0 1px var(--theme--primary);
 		}
 
@@ -389,9 +389,9 @@ function useDragDrop() {
 	font-style: normal;
 	line-height: 1;
 	text-align: right;
-	border-top-right-radius: var(--border-radius-outline);
-	border-bottom-right-radius: var(--border-radius-outline);
-	border-top-left-radius: var(--border-radius-outline);
+	border-top-right-radius: var(--theme--border-radius);
+	border-bottom-right-radius: var(--theme--border-radius);
+	border-top-left-radius: var(--theme--border-radius);
 	backdrop-filter: blur(3px);
 	background-color: rgba(var(--background-page-rgb), 0.5);
 	opacity: 0;
@@ -465,9 +465,9 @@ function useDragDrop() {
 	gap: 4px;
 	align-items: center;
 	padding: 7px;
-	border-top-right-radius: var(--border-radius-outline);
-	border-bottom-right-radius: var(--border-radius-outline);
-	border-bottom-left-radius: var(--border-radius-outline);
+	border-top-right-radius: var(--theme--border-radius);
+	border-bottom-right-radius: var(--theme--border-radius);
+	border-bottom-left-radius: var(--theme--border-radius);
 	backdrop-filter: blur(3px);
 	background-color: rgba(var(--background-page-rgb), 0.5);
 }
@@ -540,18 +540,18 @@ function useDragDrop() {
 }
 
 .br-tl {
-	border-top-left-radius: var(--border-radius-outline);
+	border-top-left-radius: var(--theme--border-radius);
 }
 
 .br-tr {
-	border-top-right-radius: var(--border-radius-outline);
+	border-top-right-radius: var(--theme--border-radius);
 }
 
 .br-br {
-	border-bottom-right-radius: var(--border-radius-outline);
+	border-bottom-right-radius: var(--theme--border-radius);
 }
 
 .br-bl {
-	border-bottom-left-radius: var(--border-radius-outline);
+	border-bottom-left-radius: var(--theme--border-radius);
 }
 </style>
diff --git a/app/src/components/v-workspace.vue b/app/src/components/v-workspace.vue
index 093cdfac9a..e6898113ae 100644
--- a/app/src/components/v-workspace.vue
+++ b/app/src/components/v-workspace.vue
@@ -157,7 +157,7 @@ const workspaceBoxSize = computed(() => {
 	display: block;
 	width: calc(100% + 8px);
 	height: calc(100% + 8px);
-	background-image: radial-gradient(var(--border-normal) 10%, transparent 10%);
+	background-image: radial-gradient(var(--theme--form--field--input--border-color) 10%, transparent 10%);
 	background-position: -6px -6px;
 	background-size: 20px 20px;
 	opacity: 0;
diff --git a/app/src/displays/color/color.vue b/app/src/displays/color/color.vue
index 0e47a49865..2c04742899 100644
--- a/app/src/displays/color/color.vue
+++ b/app/src/displays/color/color.vue
@@ -32,7 +32,8 @@ const styles = computed(() => {
 	const pageColorRGB = Color(pageColorString);
 	const colorRGB = value === null ? Color(defaultColor) : Color(value);
 
-	if (colorRGB.contrast(pageColorRGB) < 1.1) style['border'] = '1px solid var(--border-normal)';
+	if (colorRGB.contrast(pageColorRGB) < 1.1)
+		style['border'] = '1px solid var(--theme--form--field--input--border-color)';
 
 	return style;
 });
diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index 2a4e947d82..3bf1fcf3cd 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -54,7 +54,7 @@ const imageThumbnail = computed(() => {
 img {
 	height: 100%;
 	object-fit: cover;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	aspect-ratio: 1;
 }
 
@@ -68,7 +68,7 @@ img {
 	height: 100%;
 	overflow: hidden;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	aspect-ratio: 1;
 
 	&.has-file {
diff --git a/app/src/displays/image/image.vue b/app/src/displays/image/image.vue
index 83d0160583..73e808caee 100644
--- a/app/src/displays/image/image.vue
+++ b/app/src/displays/image/image.vue
@@ -39,7 +39,7 @@ img {
 	width: auto;
 	height: 100%;
 	vertical-align: -30%;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	&.circle {
 		border-radius: 100%;
diff --git a/app/src/displays/rating/rating.vue b/app/src/displays/rating/rating.vue
index 0352dd9bb7..cb6a3e4099 100644
--- a/app/src/displays/rating/rating.vue
+++ b/app/src/displays/rating/rating.vue
@@ -54,7 +54,7 @@ const ratingPercentage = computed(() => ({
 		color: #ffc107;
 		font-weight: 600;
 		background-color: rgb(255 193 7 / 0.15);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 
 		.v-icon {
 			margin-right: 4px;
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 95885e739e..f789ca5e48 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -119,7 +119,7 @@ function getLinkForItem(item: any) {
 		width: calc(100% + 12px);
 		height: calc(100% + 12px);
 		background-color: var(--background-normal);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		opacity: 0;
 		transition: opacity var(--fast) var(--transition);
 		content: '';
diff --git a/app/src/displays/translations/translations.vue b/app/src/displays/translations/translations.vue
index 08fcb5179e..2a2cb6021f 100644
--- a/app/src/displays/translations/translations.vue
+++ b/app/src/displays/translations/translations.vue
@@ -176,7 +176,7 @@ const translations = computed(() => {
 .v-list-item:not(:first-child) {
 	.header {
 		padding-top: 8px;
-		border-top: var(--border-width) solid var(--border-subdued);
+		border-top: var(--theme--border-width) solid var(--border-subdued);
 	}
 }
 </style>
diff --git a/app/src/interfaces/_system/system-display-options/system-display-options.vue b/app/src/interfaces/_system/system-display-options/system-display-options.vue
index 8e936ea3e1..e2de068c78 100644
--- a/app/src/interfaces/_system/system-display-options/system-display-options.vue
+++ b/app/src/interfaces/_system/system-display-options/system-display-options.vue
@@ -119,8 +119,8 @@ const optionsFields = computed(() => {
 	--form-vertical-gap: 24px;
 
 	padding: 12px;
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	:deep(.type-label) {
 		font-size: 1rem;
diff --git a/app/src/interfaces/_system/system-field-tree/system-field-tree.vue b/app/src/interfaces/_system/system-field-tree/system-field-tree.vue
index 394192d0e9..20a4b56f50 100644
--- a/app/src/interfaces/_system/system-field-tree/system-field-tree.vue
+++ b/app/src/interfaces/_system/system-field-tree/system-field-tree.vue
@@ -48,7 +48,7 @@ const { treeList, loadFieldRelations } = useFieldTree(chosenCollection);
 
 <style scoped>
 .system-field-tree {
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 </style>
diff --git a/app/src/interfaces/_system/system-fields/system-fields.vue b/app/src/interfaces/_system/system-fields/system-fields.vue
index 736fa4fefc..6976fa31c1 100644
--- a/app/src/interfaces/_system/system-fields/system-fields.vue
+++ b/app/src/interfaces/_system/system-fields/system-fields.vue
@@ -139,7 +139,7 @@ const removeField = (field: string) => {
 
 .v-notice.no-fields {
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--v-list-item-border-color);
+	border: var(--theme--border-width) solid var(--v-list-item-border-color);
 
 	&::after {
 		display: none;
diff --git a/app/src/interfaces/_system/system-filter/nodes.vue b/app/src/interfaces/_system/system-filter/nodes.vue
index e2bec18996..0e44fd031c 100644
--- a/app/src/interfaces/_system/system-filter/nodes.vue
+++ b/app/src/interfaces/_system/system-filter/nodes.vue
@@ -385,7 +385,7 @@ function isExistingField(node: Record<string, any>): boolean {
 	padding: 2px 6px;
 	padding-right: 8px;
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--border-subdued);
+	border: var(--theme--border-width) solid var(--border-subdued);
 	border-radius: 100px;
 	transition: border-color var(--fast) var(--transition);
 
@@ -490,7 +490,7 @@ function isExistingField(node: Record<string, any>): boolean {
 	}
 
 	&:hover {
-		border-color: var(--border-normal);
+		border-color: var(--theme--form--field--input--border-color);
 
 		.delete,
 		&:hover {
@@ -532,7 +532,7 @@ function isExistingField(node: Record<string, any>): boolean {
 .group :deep(.sortable-ghost) {
 	.node .header {
 		background-color: var(--theme--primary-background);
-		border-color: var(--theme--primary);
+		border-color: var(--theme--form--field--input--border-color-focus);
 
 		> * {
 			opacity: 0;
diff --git a/app/src/interfaces/_system/system-filter/system-filter.vue b/app/src/interfaces/_system/system-filter/system-filter.vue
index 19a404af31..5d3a759b40 100644
--- a/app/src/interfaces/_system/system-filter/system-filter.vue
+++ b/app/src/interfaces/_system/system-filter/system-filter.vue
@@ -247,14 +247,14 @@ function addKeyAsNode() {
 	:deep(.group) {
 		margin-left: 18px;
 		padding-left: 10px;
-		border-left: var(--border-width) solid var(--border-subdued);
+		border-left: var(--theme--border-width) solid var(--border-subdued);
 	}
 
 	.v-list {
 		min-width: auto;
 		margin: 0px 0px 10px;
 		padding: 20px 20px 12px;
-		border: var(--border-width) solid var(--border-subdued);
+		border: var(--theme--border-width) solid var(--border-subdued);
 
 		& > :deep(.group) {
 			margin-left: 0px;
@@ -311,12 +311,12 @@ function addKeyAsNode() {
 			padding: 0;
 			color: var(--theme--form--field--input--foreground-subdued);
 			background-color: var(--theme--background);
-			border: var(--border-width) solid var(--border-subdued);
+			border: var(--theme--border-width) solid var(--border-subdued);
 			border-radius: 100px;
 			transition: border-color var(--fast) var(--transition);
 			&:hover,
 			&.active {
-				border-color: var(--border-normal);
+				border-color: var(--theme--form--field--input--border-color);
 			}
 			&.active {
 				.expand_more {
diff --git a/app/src/interfaces/_system/system-input-translated-string/custom-translations-tooltip.vue b/app/src/interfaces/_system/system-input-translated-string/custom-translations-tooltip.vue
index 3ee8884bfa..95af6e8a62 100644
--- a/app/src/interfaces/_system/system-input-translated-string/custom-translations-tooltip.vue
+++ b/app/src/interfaces/_system/system-input-translated-string/custom-translations-tooltip.vue
@@ -154,7 +154,7 @@ const clicked = (toggleTooltip: () => void) => {
 .v-list-item:not(:first-child) {
 	.header {
 		padding-top: 8px;
-		border-top: var(--border-width) solid var(--border-subdued);
+		border-top: var(--theme--border-width) solid var(--border-subdued);
 	}
 }
 </style>
diff --git a/app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue b/app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue
index a6d50aadd8..58c47fb904 100644
--- a/app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue
+++ b/app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue
@@ -217,7 +217,7 @@ function openNewCustomTranslationDrawer() {
 		padding: 2px 8px 0;
 		color: var(--theme--primary);
 		background-color: var(--theme--primary-background);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		transition: var(--fast) var(--transition);
 		transition-property: background-color, color;
 		user-select: none;
diff --git a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
index d940ead3be..93497b0783 100644
--- a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
+++ b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
@@ -119,8 +119,8 @@ const optionsFields = computed(() => {
 	--form-vertical-gap: 24px;
 
 	padding: 12px;
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	:deep(.type-label) {
 		font-size: 1rem;
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
index 312990b1f3..e5891ac971 100644
--- a/app/src/interfaces/_system/system-modules/system-modules.vue
+++ b/app/src/interfaces/_system/system-modules/system-modules.vue
@@ -274,7 +274,7 @@ function remove(id: string) {
 }
 
 .v-list-item.enabled {
-	--v-list-item-border-color: var(--theme--primary);
+	--v-list-item-border-color: var(--theme--form--field--input--border-color-focus);
 	--v-list-item-color: var(--theme--primary-accent);
 	--v-list-item-background-color: var(--theme--primary-background);
 	--v-list-item-border-color-hover: var(--theme--primary-accent);
diff --git a/app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue b/app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue
index a27c9b2531..a27f54dc32 100644
--- a/app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue
+++ b/app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue
@@ -145,7 +145,7 @@ watch(
 	position: relative;
 	height: var(--input-height);
 	min-height: var(--input-height);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	:deep(.CodeMirror) {
 		width: 100%;
diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
index d007f78742..e1f9982ea0 100644
--- a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
+++ b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
@@ -95,7 +95,7 @@ const collapsed = ref(true);
 
 	&:hover {
 		background-color: var(--background-subdued);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	.icon {
diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-rule.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-rule.vue
index 56490540fb..c4ef3cd01e 100644
--- a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-rule.vue
+++ b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-rule.vue
@@ -83,7 +83,7 @@ const valueLength = computed(() => String(props.value ?? props.defaultValue).len
 	.value {
 		margin-right: 1ch;
 		border: none;
-		border-bottom: 1px solid var(--border-normal);
+		border-bottom: 1px solid var(--theme--form--field--input--border-color);
 		min-width: 5ch;
 		width: v-bind(valueLength);
 		max-width: 100%;
diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
index c130b683bb..0c871d631c 100644
--- a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
+++ b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
@@ -50,11 +50,24 @@ const { theme } = useTheme(darkMode, themeLight, themeDark, {}, {});
 
 <style scoped lang="scss">
 .theme-overrides {
-	border: 2px solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	padding: var(--input-padding);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	max-height: var(--input-height-max);
 	overflow-y: auto;
 	background-color: var(--theme--form--field--input--background);
+	transition-duration: var(--fast);
+	transition-timing-function: var(--transition);
+	transition-property: box-shadow, border-color;
+
+	&:hover {
+		border-color: var(--theme--form--field--input--border-color-hover);
+		box-shadow: var(--theme--form--field--input--box-shadow-hover);
+	}
+
+	&:focus-within {
+		border-color: var(--theme--form--field--input--border-color-focus);
+		box-shadow: var(--theme--form--field--input--box-shadow-focus);
+	}
 }
 </style>
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index 79fb88d197..438dd88cf9 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -226,7 +226,7 @@ const { createAllowed, updateAllowed } = useRelationPermissionsM2O(relationInfo)
 	height: var(--input-height-tall);
 	overflow: hidden;
 	background-color: var(--background-normal-alt);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 img {
@@ -383,6 +383,6 @@ img {
 	align-items: center;
 	justify-content: center;
 	height: var(--input-height-tall);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 </style>
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 4f16b7d182..114970d8cb 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -290,7 +290,7 @@ function useURLImport() {
 	margin-left: -8px;
 	overflow: hidden;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	img {
 		width: 100%;
diff --git a/app/src/interfaces/group-accordion/accordion-section.vue b/app/src/interfaces/group-accordion/accordion-section.vue
index 27062c9ba4..6f49342b64 100644
--- a/app/src/interfaces/group-accordion/accordion-section.vue
+++ b/app/src/interfaces/group-accordion/accordion-section.vue
@@ -128,10 +128,10 @@ function getFieldsForGroup(group: null | string, passed: string[] = []): Field[]
 
 <style lang="scss" scoped>
 .accordion-section {
-	border-top: var(--border-width) solid var(--border-normal);
+	border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 
 	&:last-child {
-		border-bottom: var(--border-width) solid var(--border-normal);
+		border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	}
 }
 
diff --git a/app/src/interfaces/input-block-editor/editorjs-overrides.css b/app/src/interfaces/input-block-editor/editorjs-overrides.css
index 1b46c8d620..964f10e5b2 100644
--- a/app/src/interfaces/input-block-editor/editorjs-overrides.css
+++ b/app/src/interfaces/input-block-editor/editorjs-overrides.css
@@ -1,14 +1,14 @@
 .codex-editor {
 	--bg-color: var(--background-normal) !important;
 	--front-color: var(--theme--form--field--input--foreground) !important;
-	--border-color: var(--border-normal) !important;
+	--border-color: var(--theme--form--field--input--border-color) !important;
 }
 
 .codex-editor .ce-toolbar__plus,
 .codex-editor .ce-toolbar__settings-btn {
 	color: var(--theme--form--field--input--foreground);
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .codex-editor .ce-toolbar__plus:hover,
@@ -41,16 +41,16 @@
 }
 
 .codex-editor .cdx-search-field {
-	border-radius: var(--border-radius) !important;
+	border-radius: var(--theme--border-radius) !important;
 	border: none;
 	background: var(--background-subdued);
 }
 
 .codex-editor .ce-popover {
 	background: var(--theme--background);
-	border-color: var(--border-normal);
-	border-width: var(--border-width);
-	border-radius: var(--border-radius);
+	border-color: var(--theme--form--field--input--border-color);
+	border-width: var(--theme--border-width);
+	border-radius: var(--theme--border-radius);
 }
 
 .codex-editor .ce-popover-item__title {
@@ -87,7 +87,7 @@
 
 .codex-editor .ce-popover-item-icon {
 	background: var(--theme--background);
-	border: var(--border-width) solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	box-shadow: none;
 }
 
@@ -100,7 +100,7 @@
 }
 
 .codex-editor .ce-popover__items:not(:first-child) {
-	border-top: var(--border-width) solid var(--border-normal);
+	border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	padding-top: 8px;
 }
 
@@ -110,7 +110,7 @@
 }
 
 .codex-editor .image-tool--loading .image-tool__image {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .ce-inline-toolbar__toggler-and-button-wrapper {
@@ -119,7 +119,7 @@
 
 .codex-editor .ce-inline-toolbar__dropdown {
 	margin: 0;
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .ce-inline-tool {
@@ -167,9 +167,9 @@
 .codex-editor .ce-inline-toolbar,
 .codex-editor .ce-settings {
 	background: var(--background-subdued);
-	border-color: var(--border-normal);
-	border-width: var(--border-width);
-	border-radius: var(--border-radius);
+	border-color: var(--theme--form--field--input--border-color);
+	border-width: var(--theme--border-width);
+	border-radius: var(--theme--border-radius);
 }
 
 .codex-editor .cdx-settings-button:hover,
@@ -219,25 +219,25 @@
 	color: var(--theme--form--field--input--foreground);
 	font-size: inherit;
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	box-shadow: unset;
 }
 
 .codex-editor .cdx-input:hover,
 .codex-editor .ce-code__textarea:hover {
-	border-color: var(--border-normal-alt);
+	border-color: var(--theme--form--field--input--border-color-hover);
 }
 
 .codex-editor .cdx-input:focus,
 .codex-editor .ce-code__textarea:focus {
-	border-color: var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
 }
 
 .codex-editor .ce-inline-tool-input {
 	color: var(--theme--primary);
 	background: var(--background-normal);
-	border-top-color: var(--border-normal);
+	border-top-color: var(--theme--form--field--input--border-color);
 }
 
 /* Buttons */
@@ -248,8 +248,8 @@
 	font-size: var(--v-button-font-size);
 	text-decoration: none;
 	background-color: var(--v-button-background-color);
-	border: var(--border-width) solid var(--v-button-background-color);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--v-button-background-color);
+	border-radius: var(--theme--border-radius);
 	cursor: pointer;
 }
 
@@ -265,7 +265,7 @@
 .codex-editor .cdx-personality {
 	color: var(--theme--form--field--input--foreground);
 	background: var(--background-normal);
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 	box-shadow: unset;
 }
 
@@ -291,7 +291,7 @@
 .codex-editor .image-tool {
 	--bg-color: var(--background-normal-alt);
 	--front-color: var(--theme--primary);
-	--border-color: var(--border-normal);
+	--border-color: var(--theme--form--field--input--border-color);
 }
 
 /* Personality */
@@ -315,8 +315,8 @@
 
 .codex-editor .cdx-checklist__item-checkbox {
 	background: transparent;
-	border-color: var(--border-normal);
-	border-width: var(--border-width);
+	border-color: var(--theme--form--field--input--border-color);
+	border-width: var(--theme--border-width);
 	border-radius: 4px;
 }
 
@@ -355,13 +355,13 @@
 /* Attaches */
 
 .codex-editor .cdx-attaches--with-file {
-	border: var(--border-width) solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .cdx-attaches--with-file .cdx-attaches__file-icon {
 	padding: 5px;
 	background: var(--background-normal-alt);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	margin-right: 12px;
 }
 
@@ -379,7 +379,7 @@
 
 .codex-editor .cdx-attaches--with-file .cdx-attaches__download-button {
 	background: var(--background-subdued);
-	border: var(--border-width) solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .cdx-attaches--with-file .cdx-attaches__download-button:hover {
@@ -408,7 +408,7 @@
 
 .codex-editor .tc-wrap {
 	--color-background: var(--v-list-item-background-color-active);
-	--color-border: var(--border-normal);
+	--color-border: var(--theme--form--field--input--border-color);
 	--color-background-hover: var(--v-list-item-background-color-hover);
 }
 
@@ -437,7 +437,7 @@
 .codex-editor .tc-toolbox__toggler svg rect:first-child {
 	/* This is very ugly, but there no other way to set background of the element */
 	fill: var(--background-normal) !important;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .codex-editor .tc-toolbox__toggler:hover svg rect:first-child {
@@ -577,7 +577,7 @@
 	font-size: 18px;
 	font-style: italic;
 	line-height: 34px;
-	border-left: 2px dashed var(--border-normal);
+	border-left: 2px dashed var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .ce-block video,
@@ -608,12 +608,12 @@
 
 .codex-editor .ce-block table th,
 .codex-editor .ce-block table td {
-	border: 1px solid var(--border-normal);
+	border: 1px solid var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .ce-block .tc-table__wrap,
 .codex-editor .ce-block .tc-table__cell {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .codex-editor .ce-block figure {
diff --git a/app/src/interfaces/input-block-editor/input-block-editor.vue b/app/src/interfaces/input-block-editor/input-block-editor.vue
index f9a67c5738..407cb46dff 100644
--- a/app/src/interfaces/input-block-editor/input-block-editor.vue
+++ b/app/src/interfaces/input-block-editor/input-block-editor.vue
@@ -195,22 +195,22 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
 .disabled {
 	color: var(--theme--form--field--input--foreground-subdued);
 	background-color: var(--background-subdued);
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 	pointer-events: none;
 }
 
 .bordered {
 	padding: var(--input-padding) 4px var(--input-padding) calc(var(--input-padding) + 8px) !important;
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	&:hover {
-		border-color: var(--border-normal-alt);
+		border-color: var(--theme--form--field--input--border-color-hover);
 	}
 
 	&:focus-within {
-		border-color: var(--theme--primary);
+		border-color: var(--theme--form--field--input--border-color-focus);
 	}
 }
 
@@ -235,7 +235,7 @@ function sanitizeValue(value: any): EditorJS.OutputData | null {
 .uploader-preview-image {
 	margin-bottom: var(--form-vertical-gap);
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .uploader-preview-image img {
diff --git a/app/src/interfaces/input-rich-text-html/get-editor-styles.ts b/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
index 5ca652980a..8b57cbb5bf 100644
--- a/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
+++ b/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
@@ -115,7 +115,7 @@ code {
 	padding: 2px 4px;
 	font-family: ${cssVar('--theme--font-family-monospace')}, monospace;
 	background-color: ${cssVar('--background-normal')};
-	border-radius: ${cssVar('--border-radius')};
+	border-radius: ${cssVar('--theme--border-radius')};
 	overflow-wrap: break-word;
 }
 pre {
@@ -125,7 +125,7 @@ pre {
 	padding: 1em;
 	font-family: ${cssVar('--theme--font-family-monospace')}, monospace;
 	background-color: ${cssVar('--background-normal')};
-	border-radius: ${cssVar('--border-radius')};
+	border-radius: ${cssVar('--theme--border-radius')};
 	overflow: auto;
 }
 blockquote {
@@ -133,22 +133,22 @@ blockquote {
 	font-size: 15px;
 	line-height: 24px;
 	font-weight: 500;
-	border-left: 2px solid ${cssVar('--border-normal')};
+	border-left: 2px solid ${cssVar('--theme--form--field--input--border-color')};
 	padding-left: 1em;
 	margin-left: 0px;
 }
 video,
 img {
 	max-width: 100%;
-	border-radius: ${cssVar('--border-radius')};
+	border-radius: ${cssVar('--theme--border-radius')};
 	height: auto;
 }
 iframe {
 	max-width: 100%;
-	border-radius: ${cssVar('--border-radius')};
+	border-radius: ${cssVar('--theme--border-radius')};
 }
 hr {
-	background-color: ${cssVar('--border-normal')};
+	background-color: ${cssVar('--theme--form--field--input--border-color')};
 	height: 1px;
 	border: none;
 	margin-top: 2em;
@@ -162,7 +162,7 @@ table {
 }
 table th,
 table td {
-	border: 1px solid ${cssVar('--border-normal')};
+	border: 1px solid ${cssVar('--theme--form--field--input--border-color')};
 	padding: 0.4rem;
 }
 figure {
diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
index 6dce6532e7..9beea7387e 100644
--- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
+++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@@ -519,7 +519,7 @@ function setFocus(val: boolean) {
 	height: var(--input-height-tall);
 	margin-bottom: 24px;
 	object-fit: cover;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .content {
diff --git a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
index bee37a20fe..c20f8cd47f 100644
--- a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
+++ b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
@@ -90,19 +90,21 @@
 .tox-tinymce {
 	min-height: 300px;
 	color: var(--theme--form--field--input--foreground);
-	border: 2px solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: color, border-color;
+	box-shadow: var(--theme--form--field--input--box-shadow);
 }
 
 .wysiwyg:not(.disabled) .tox-tinymce:hover {
-	border-color: var(--border-normal-alt);
+	border-color: var(--theme--form--field--input--border-color-hover);
+	box-shadow: var(--theme--form--field--input--box-shadow-hover);
 }
 
 .wysiwyg:not(.disabled) .tox-tinymce.focus {
-	border-color: var(--theme--primary) !important;
-	box-shadow: 0 0 16px -8px var(--theme--primary) !important;
+	border-color: var(--theme--form--field--input--border-color-focus) !important;
+	box-shadow: var(--theme--form--field--input--box-shadow-focus) !important;
 }
 
 .tox .tox-toolbar,
@@ -111,7 +113,7 @@
 	min-height: 40px;
 	padding: 2px 0;
 	background: var(--background-subdued);
-	border-bottom: 2px solid var(--border-normal);
+	border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 }
 
 .tox .tox-pop__dialog .tox-toolbar {
@@ -148,7 +150,7 @@ body.dark .tox .tox-toolbar__overflow {
 .tox .tox-tbtn:hover,
 .tox .tox-split-button:focus {
 	color: var(--theme--form--field--input--foreground);
-	background: var(--border-normal);
+	background: var(--theme--form--field--input--border-color);
 }
 
 .tox .tox-tbtn--bespoke {
@@ -232,8 +234,8 @@ body.dark .tox .tox-toolbar__overflow {
 	font-size: 14px;
 	font-family: var(--theme--font-family-sans-serif);
 	background-color: var(--theme--background);
-	border: 2px solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 }
 
@@ -255,12 +257,12 @@ body.dark .tox .tox-toolbar__overflow {
 	color: var(--theme--form--field--input--foreground);
 	font-family: var(--theme--font-family-sans-serif);
 	background-color: var(--background-subdued);
-	border: 2px solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 
 .tox .tox-collection__item {
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .tox .tox-collection--list .tox-collection__item {
@@ -284,7 +286,7 @@ body.dark .tox .tox-toolbar__overflow {
 .tox .tox-textfield:focus,
 .tox .tox-selectfield select:focus,
 .tox .tox-textarea:focus {
-	border-color: var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
 }
 
 .tox .tox-button {
@@ -303,7 +305,7 @@ body.dark .tox .tox-toolbar__overflow {
 	border: 2px solid var(--theme--primary);
 	border: none;
 	border-color: var(--theme--primary);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	cursor: pointer;
 	-webkit-transition: var(--fast) var(--transition);
 	transition: var(--fast) var(--transition);
@@ -362,7 +364,7 @@ body.dark .tox .tox-toolbar__overflow {
 	font-weight: 500;
 	font-size: 14px;
 	border-bottom: none;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: background-color, color;
 }
@@ -382,7 +384,7 @@ body.dark .tox .tox-toolbar__overflow {
 .tox .tox-pop__dialog,
 .tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
 .tox .tox-collection--list .tox-collection__group {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .tox .tox-insert-table-picker__label {
@@ -390,7 +392,7 @@ body.dark .tox .tox-toolbar__overflow {
 }
 
 .tox .tox-insert-table-picker > div {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .tox .tox-insert-table-picker .tox-insert-table-picker__selected {
@@ -402,7 +404,7 @@ body.dark .tox .tox-toolbar__overflow {
 }
 
 .tox .tox-pop.tox-pop--top::before {
-	border-bottom-color: var(--border-normal);
+	border-bottom-color: var(--theme--form--field--input--border-color);
 }
 
 .tox .tox-dialog-wrap__backdrop .tox-rgba-preview {
diff --git a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
index b8fa01fd63..745f5c47cb 100644
--- a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
+++ b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
@@ -417,14 +417,18 @@ function edit(type: Alteration, options?: Record<string, any>) {
 .interface-input-rich-text-md {
 	--v-button-background-color: transparent;
 	--v-button-color: var(--theme--form--field--input--foreground);
-	--v-button-background-color-hover: var(--border-normal);
+	--v-button-background-color-hover: var(--theme--form--field--input--border-color);
 	--v-button-color-hover: var(--theme--form--field--input--foreground);
 
 	min-height: 300px;
 	overflow: hidden;
 	font-family: var(--theme--font-family-sans-serif);
-	border: 2px solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
+	box-shadow: var(--theme--form--field--input--box-shadow);
+	transition-duration: var(--fast);
+	transition-timing-function: var(--transition);
+	transition-property: box-shadow, border-color;
 }
 
 .interface-input-rich-text-md :deep(.CodeMirror-scroll) {
@@ -435,9 +439,14 @@ function edit(type: Alteration, options?: Record<string, any>) {
 	background-color: var(--background-subdued);
 }
 
+.interface-input-rich-text-md:not(.disabled):hover {
+	border-color: var(--theme--form--field--input--border-color-hover);
+	box-shadow: var(--theme--form--field--input--box-shadow-hover);
+}
+
 .interface-input-rich-text-md:not(.disabled):focus-within {
-	border-color: var(--theme--primary);
-	box-shadow: 0 0 16px -8px var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
+	box-shadow: var(--theme--form--field--input--box-shadow-focus);
 }
 
 textarea {
@@ -511,7 +520,7 @@ textarea {
 	min-height: 40px;
 	padding: 0 4px;
 	background-color: var(--background-subdued);
-	border-bottom: 2px solid var(--border-normal);
+	border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 
 	.v-button + .v-button {
 		margin-left: 2px;
@@ -524,9 +533,9 @@ textarea {
 	.view {
 		--v-button-background-color: var(--border-subdued);
 		--v-button-color: var(--theme--form--field--input--foreground-subdued);
-		--v-button-background-color-hover: var(--border-normal);
+		--v-button-background-color-hover: var(--theme--form--field--input--border-color);
 		--v-button-color-hover: var(--theme--form--field--input--foreground);
-		--v-button-background-color-active: var(--border-normal);
+		--v-button-background-color-active: var(--theme--form--field--input--border-color);
 		--v-button-color-active: var(--theme--form--field--input--foreground);
 	}
 }
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index f180f2c0d1..e77ef555da 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -629,7 +629,7 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 			.append {
 				position: sticky;
 				right: 0;
-				border-left: var(--border-width) solid var(--border-subdued);
+				border-left: var(--theme--border-width) solid var(--border-subdued);
 			}
 		}
 	}
@@ -638,8 +638,8 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 
 <style lang="scss" scoped>
 .bordered {
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius-outline);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	padding: var(--v-card-padding);
 }
 
diff --git a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
index 5f75c35eb3..5c6a5bb301 100644
--- a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
+++ b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
@@ -295,7 +295,7 @@ function stageEdits(item: Record<string, any>) {
 	.preview {
 		padding: 12px;
 		background-color: var(--card-face-color);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		box-shadow: 0px 0px 6px 0px rgb(var(--card-shadow-color), 0.2);
 		cursor: grab;
 		transition: var(--fast) var(--transition);
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index ecfedf65c0..53f6ade632 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -588,7 +588,7 @@ function getLinkForItem(item: DisplayItem) {
 			.append {
 				position: sticky;
 				right: 0;
-				border-left: var(--border-width) solid var(--border-subdued);
+				border-left: var(--theme--border-width) solid var(--border-subdued);
 			}
 		}
 	}
@@ -597,8 +597,8 @@ function getLinkForItem(item: DisplayItem) {
 
 <style lang="scss" scoped>
 .bordered {
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius-outline);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	padding: var(--v-card-padding);
 }
 
diff --git a/app/src/interfaces/map/map.vue b/app/src/interfaces/map/map.vue
index b383c8e92c..708de28133 100644
--- a/app/src/interfaces/map/map.vue
+++ b/app/src/interfaces/map/map.vue
@@ -466,8 +466,8 @@ function handleKeyDown(event: any) {
 .interface-map {
 	position: relative;
 	overflow: hidden;
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	.map {
 		position: relative;
@@ -492,7 +492,7 @@ function handleKeyDown(event: any) {
 	.v-info {
 		padding: 20px;
 		background-color: var(--theme--form--field--input--background);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		box-shadow: var(--card-shadow);
 	}
 
@@ -507,8 +507,8 @@ function handleKeyDown(event: any) {
 		padding: 10px;
 		color: var(--theme--form--field--input--foreground-subdued);
 		background-color: var(--theme--background);
-		border: var(--border-width) solid var(--theme--background);
-		border-radius: var(--border-radius);
+		border: var(--theme--border-width) solid var(--theme--background);
+		border-radius: var(--theme--border-radius);
 
 		span {
 			width: auto;
diff --git a/app/src/interfaces/map/options.vue b/app/src/interfaces/map/options.vue
index e95b275827..dd4e2915e1 100644
--- a/app/src/interfaces/map/options.vue
+++ b/app/src/interfaces/map/options.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
 .map {
 	height: 400px;
 	overflow: hidden;
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 </style>
diff --git a/app/src/interfaces/select-color/select-color.vue b/app/src/interfaces/select-color/select-color.vue
index 1c8c6ae33a..ee543e2849 100644
--- a/app/src/interfaces/select-color/select-color.vue
+++ b/app/src/interfaces/select-color/select-color.vue
@@ -246,7 +246,10 @@ function useColor() {
 						icon
 						:style="{
 							'--v-button-background-color': isValidColor ? hex : 'transparent',
-							border: lowContrast === false ? 'none' : 'var(--border-width) solid var(--border-normal)',
+							border:
+								lowContrast === false
+									? 'none'
+									: 'var(--theme--border-width) solid var(--theme--form--field--input--border-color)',
 						}"
 						@click="activateColorPicker"
 					>
@@ -391,7 +394,7 @@ function useColor() {
 	width: calc(var(--input-height) - 20px);
 	max-height: calc(var(--input-height) - 20px);
 	overflow: hidden;
-	border-radius: calc(var(--border-radius) + 2px);
+	border-radius: calc(var(--theme--border-radius) + 2px);
 	cursor: pointer;
 }
 
@@ -413,7 +416,7 @@ function useColor() {
 	&.low-contrast {
 		--v-button-height: 18px;
 		--v-button-width: 18px;
-		border: 1px solid var(--border-normal-alt);
+		border: 1px solid var(--theme--form--field--input--border-color-hover);
 	}
 }
 
@@ -441,7 +444,7 @@ function useColor() {
 }
 
 .color-data-inputs .color-data-input {
-	--border-radius: 0px;
+	--v-input-border-radius: 0px;
 }
 
 .color-data-inputs .color-data-input :deep(.input:focus-within),
@@ -457,36 +460,36 @@ function useColor() {
 }
 
 .color-data-inputs .color-data-input:not(:first-child) :deep(.input) {
-	margin-left: calc(-1 * var(--border-width));
+	margin-left: calc(-1 * var(--theme--border-width));
 }
 
 .color-data-inputs .color-data-input:first-child {
-	--border-radius: 4px 0px 0px 4px;
+	--v-input-border-radius: var(--theme--border-radius) 0px 0px var(--theme--border-radius);
 }
 
 .color-data-inputs .color-data-input:last-child {
-	--border-radius: 0px 4px 4px 0px;
+	--v-input-border-radius: 0px var(--theme--border-radius) var(--theme--border-radius) 0px;
 }
 
 .color-data-inputs.stacked .color-data-input:not(:first-child) :deep(.input) {
-	margin-top: calc(-2 * var(--border-width));
+	margin-top: calc(-2 * var(--theme--border-width));
 	margin-left: initial;
 }
 
 .color-data-inputs.stacked .color-data-input:not(:first-child):not(:nth-child(2)) :deep(.input) {
-	margin-left: calc(-1 * var(--border-width));
+	margin-left: calc(-1 * var(--theme--border-width));
 }
 
 .color-data-inputs.stacked .color-data-input:first-child {
-	--border-radius: 4px 4px 0px 0px;
+	--v-input-border-radius: var(--theme--border-radius) var(--theme--border-radius) 0px 0px;
 }
 
 .color-data-inputs.stacked .color-data-input:nth-child(2) {
-	--border-radius: 0px 0px 0px 4px;
+	--v-input-border-radius: 0px 0px 0px var(--theme--border-radius);
 }
 
 .color-data-inputs.stacked .color-data-input:last-child {
-	--border-radius: 0px 0px 4px 0px;
+	--v-input-border-radius: 0px 0px var(--theme--border-radius) 0px;
 }
 
 .color-data-alphas {
diff --git a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
index 62b10b8b1f..4698b60d3a 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
+++ b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
@@ -84,8 +84,8 @@ const searchDebounced = ref('');
 	max-height: var(--input-height-max);
 	overflow: auto;
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 
 .search {
@@ -110,7 +110,7 @@ const searchDebounced = ref('');
 	padding: 4px 8px;
 	text-align: right;
 	background-color: var(--theme--background);
-	border-top-left-radius: var(--border-radius);
+	border-top-left-radius: var(--theme--border-radius);
 }
 
 .footer > button {
diff --git a/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue b/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
index 42f43dec43..c79a1d858d 100644
--- a/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
+++ b/app/src/interfaces/select-multiple-checkbox/select-multiple-checkbox.vue
@@ -194,8 +194,8 @@ const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple
 	width: 100%;
 	height: var(--input-height);
 	padding: 10px;
-	border: 2px dashed var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px dashed var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	input {
 		display: block;
diff --git a/app/src/interfaces/select-radio/select-radio.vue b/app/src/interfaces/select-radio/select-radio.vue
index 212a0310ff..0b51796a1c 100644
--- a/app/src/interfaces/select-radio/select-radio.vue
+++ b/app/src/interfaces/select-radio/select-radio.vue
@@ -138,8 +138,8 @@ const customIcon = computed(() => {
 	width: 100%;
 	height: var(--input-height);
 	padding: 10px;
-	border: 2px dashed var(--border-normal);
-	border-radius: var(--border-radius);
+	border: 2px dashed var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 
 	input {
 		display: block;
diff --git a/app/src/interfaces/translations/language-select.vue b/app/src/interfaces/translations/language-select.vue
index 392bbfc929..1f110f83a6 100644
--- a/app/src/interfaces/translations/language-select.vue
+++ b/app/src/interfaces/translations/language-select.vue
@@ -63,7 +63,7 @@ const displayValue = computed(() => {
 	color: var(--theme--primary);
 	text-align: left;
 	background-color: var(--theme--primary-background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	.display-value {
 		flex-grow: 1;
diff --git a/app/src/layouts/cards/components/card.vue b/app/src/layouts/cards/components/card.vue
index 401fb607e4..ccb8b39693 100644
--- a/app/src/layouts/cards/components/card.vue
+++ b/app/src/layouts/cards/components/card.vue
@@ -149,7 +149,7 @@ function handleClick() {
 		border-color: var(--theme--primary-subdued);
 		border-style: solid;
 		border-width: 0px;
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		transition: border-width var(--fast) var(--transition);
 
 		&::after {
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index 0603758b69..183fd68c69 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -127,8 +127,8 @@ function toggleDescending() {
 	margin-bottom: 36px;
 	padding: 0 8px;
 	background-color: var(--theme--background);
-	border-top: var(--border-width) solid var(--border-subdued);
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-top: var(--theme--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 	box-shadow: 0 0 0 2px var(--theme--background);
 }
 
diff --git a/app/src/layouts/kanban/kanban.vue b/app/src/layouts/kanban/kanban.vue
index 15e4c06ad5..926e0539fb 100644
--- a/app/src/layouts/kanban/kanban.vue
+++ b/app/src/layouts/kanban/kanban.vue
@@ -220,13 +220,13 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 			width: 320px;
 			padding: 8px 0;
 			background-color: var(--background-normal);
-			border: var(--border-width) solid var(--border-normal);
-			border-radius: var(--border-radius);
+			border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+			border-radius: var(--theme--border-radius);
 			margin-right: 20px;
 			transition: border-color var(--transition) var(--fast);
 
 			&:active {
-				border-color: var(--border-normal-alt);
+				border-color: var(--theme--form--field--input--border-color-hover);
 				cursor: move;
 			}
 
@@ -261,7 +261,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 					font-size: 12px;
 					line-height: 20px;
 					background-color: var(--background-normal-alt);
-					border-radius: 12px; //var(--border-radius);
+					border-radius: 12px; //var(--theme--border-radius);
 				}
 
 				.actions {
@@ -288,7 +288,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 					margin: 2px 16px 6px 16px;
 					padding: 12px 16px;
 					background-color: var(--theme--background);
-					border-radius: var(--border-radius);
+					border-radius: var(--theme--border-radius);
 					box-shadow: 0px 2px 4px 0px rgba(var(--card-shadow-color), 0.1);
 
 					&:hover .title {
@@ -317,7 +317,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 				.image {
 					width: 100%;
 					margin-top: 10px;
-					border-radius: var(--border-radius);
+					border-radius: var(--theme--border-radius);
 					margin-top: 4px;
 					max-height: 300px;
 				}
@@ -385,8 +385,8 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 	.add-group {
 		cursor: pointer;
 		padding: 8px 8px;
-		border: var(--border-width) dashed var(--border-subdued);
-		border-radius: var(--border-radius);
+		border: var(--theme--border-width) dashed var(--border-subdued);
+		border-radius: var(--theme--border-radius);
 		transition: border-color var(--transition) var(--fast);
 
 		.v-icon {
diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue
index e7f8a1e4af..db3cac8489 100644
--- a/app/src/layouts/map/map.vue
+++ b/app/src/layouts/map/map.vue
@@ -137,7 +137,7 @@ limitWritable.value = selectedSize;
 .v-info {
 	padding: 40px;
 	background-color: var(--theme--background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: var(--card-shadow);
 	pointer-events: none;
 }
@@ -189,7 +189,7 @@ limitWritable.value = selectedSize;
 	font-size: 14px;
 	font-family: var(--theme--font-family-sans-serif);
 	background-color: var(--theme--background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: var(--card-shadow);
 	transform: translate(-50%, -140%);
 	pointer-events: none;
@@ -207,8 +207,8 @@ limitWritable.value = selectedSize;
 	padding: 10px;
 	color: var(--theme--foreground-subdued);
 	background-color: var(--theme--background);
-	border: var(--border-width) solid var(--theme--background);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--background);
+	border-radius: var(--theme--border-radius);
 	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
 
 	span {
diff --git a/app/src/modules/content/components/version-promote-drawer.vue b/app/src/modules/content/components/version-promote-drawer.vue
index 81410ffe57..74ff1d076a 100644
--- a/app/src/modules/content/components/version-promote-drawer.vue
+++ b/app/src/modules/content/components/version-promote-drawer.vue
@@ -283,7 +283,7 @@ function useTab() {
 	}
 
 	&.main {
-		border-radius: var(--border-radius) var(--border-radius) 0 0;
+		border-radius: var(--theme--border-radius) var(--theme--border-radius) 0 0;
 		&.active {
 			color: var(--theme--secondary);
 			background-color: var(--secondary-alt);
@@ -297,7 +297,7 @@ function useTab() {
 	}
 
 	&.current {
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
+		border-radius: 0 0 var(--theme--border-radius) var(--theme--border-radius);
 		&.active {
 			color: var(--theme--primary);
 			background-color: var(--theme--primary-background);
diff --git a/app/src/modules/insights/routes/overview.vue b/app/src/modules/insights/routes/overview.vue
index ef3d7f4ff4..437a1f45e3 100644
--- a/app/src/modules/insights/routes/overview.vue
+++ b/app/src/modules/insights/routes/overview.vue
@@ -421,8 +421,8 @@ async function batchDelete() {
 <style scoped lang="scss">
 .v-input {
 	&.search {
+		--v-input-border-radius: calc(44px / 2);
 		height: var(--v-button-height);
-		--border-radius: calc(44px / 2);
 		width: 200px;
 		margin-left: auto;
 
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index 3cd7f5040a..eb1b8babfd 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -253,7 +253,7 @@ const stageChanges = () => {
 	margin-bottom: 40px;
 	padding-bottom: 2px;
 	font-weight: 700;
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .group + .group {
@@ -295,8 +295,8 @@ const stageChanges = () => {
 	width: 160px;
 	height: 100px;
 	margin-bottom: 8px;
-	border: var(--border-width) solid var(--border-subdued);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--border-subdued);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: background-color, border-color;
 }
@@ -327,12 +327,12 @@ const stageChanges = () => {
 	padding: 8px 16px;
 	background-color: var(--background-page);
 	border: 2px solid var(--theme--primary);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: 0 0 8px var(--theme--primary-75);
 }
 
 .interface:hover .preview {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .interface.active .preview {
@@ -370,8 +370,8 @@ const stageChanges = () => {
 
 	grid-column: 1 / span var(--columns);
 	background-color: var(--background-subdued);
-	border-top: var(--border-width) solid var(--border-normal);
-	border-bottom: var(--border-width) solid var(--border-normal);
+	border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 }
 
 :deep(.v-notice.normal) {
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 8840e6ffd4..b930b1593e 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -277,8 +277,8 @@ async function onSort(updates: Collection[], removeGroup = false) {
 
 <style scoped lang="scss">
 .v-input.search {
+	--v-input-border-radius: calc(44px / 2);
 	height: var(--v-button-height);
-	--border-radius: calc(44px / 2);
 	width: 200px;
 	margin-left: auto;
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
index 78ecca665f..b7b7806793 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
@@ -287,8 +287,8 @@ const unsortableJunctionFields = computed(() => {
 	color: var(--theme--foreground-subdued);
 	font-family: var(--theme--font-family-monospace);
 	background-color: var(--background-subdued);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 
 .one-collection-field {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
index 60779e9bf0..161b59c0c1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
@@ -166,8 +166,8 @@ const options = computed({
 
 	grid-column: 1 / span var(--columns);
 	background-color: var(--background-subdued);
-	border-top: var(--border-width) solid var(--border-normal);
-	border-bottom: var(--border-width) solid var(--border-normal);
+	border-top: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 }
 
 .setup {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
index 4d3b47faa8..9fde551387 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
@@ -183,7 +183,7 @@ function toggleInterface(id: string) {
 	margin-bottom: 40px;
 	padding-bottom: 2px;
 	font-weight: 700;
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .group + .group {
@@ -225,8 +225,8 @@ function toggleInterface(id: string) {
 	width: 160px;
 	height: 100px;
 	margin-bottom: 8px;
-	border: var(--border-width) solid var(--border-subdued);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--border-subdued);
+	border-radius: var(--theme--border-radius);
 	transition: var(--fast) var(--transition);
 	transition-property: background-color, border-color;
 }
@@ -257,12 +257,12 @@ function toggleInterface(id: string) {
 	padding: 8px 16px;
 	background-color: var(--theme--background);
 	border: 2px solid var(--theme--primary);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: 0 0 8px var(--theme--primary-subdued);
 }
 
 .interface:hover .preview {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .interface.active .preview {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 2ab95f264d..121011b6fd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -136,7 +136,7 @@ async function save() {
 }
 
 .v-input.search {
-	--border-radius: calc(44px / 2);
+	--v-input-border-radius: calc(44px / 2);
 	width: 200px;
 	margin-left: auto;
 
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 1e1bd965f8..e050947cdf 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -376,7 +376,7 @@ async function onGroupSortChange(fields: Field[]) {
 	padding: var(--input-padding);
 	padding-top: 40px;
 	padding-bottom: 16px;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	> * {
 		position: relative;
@@ -443,19 +443,19 @@ async function onGroupSortChange(fields: Field[]) {
 
 	&.nested {
 		.field :deep(.input) {
-			border: var(--border-width) solid var(--theme--primary-subdued);
+			border: var(--theme--border-width) solid var(--theme--primary-subdued);
 		}
 	}
 }
 
 .field {
 	&.v-input :deep(.input) {
-		border: var(--border-width) solid var(--border-subdued);
+		border: var(--theme--border-width) solid var(--border-subdued);
 	}
 
 	&.v-input :deep(.input:hover) {
 		background-color: var(--card-face-color);
-		border: var(--border-width) solid var(--border-normal-alt);
+		border: var(--theme--border-width) solid var(--theme--form--field--input--border-color-hover);
 	}
 
 	.label {
@@ -520,7 +520,7 @@ async function onGroupSortChange(fields: Field[]) {
 }
 
 .sortable-ghost {
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	outline: 2px dashed var(--theme--primary);
 
 	> * {
diff --git a/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue b/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
index 3aad06c0c8..a50b6c823e 100644
--- a/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
+++ b/app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue
@@ -203,7 +203,7 @@ const steps = computed(() => {
 		width: calc(100% + 8px);
 		height: calc(100% + 8px);
 		background-color: var(--background-normal-alt);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		opacity: 0;
 		transition: opacity var(--fast) var(--transition);
 		content: '';
@@ -232,7 +232,7 @@ const steps = computed(() => {
 .json {
 	background-color: var(--background-subdued);
 	font-family: var(--theme--font-family-monospace);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	padding: 20px;
 	margin-top: 20px;
 	white-space: pre-wrap;
@@ -248,7 +248,7 @@ const steps = computed(() => {
 		&::after {
 			content: '';
 			position: absolute;
-			width: var(--border-width);
+			width: var(--theme--border-width);
 			left: -11px;
 			top: 0;
 			background-color: var(--border-subdued);
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
index b661fe6057..3cc2704f3e 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
@@ -25,7 +25,7 @@ const { t } = useI18n();
 	display: flex;
 	padding: 12px;
 	background-color: var(--theme--form--field--input--background);
-	border-bottom: var(--border-width) solid var(--border-normal);
+	border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 
 	.name {
 		flex-grow: 1;
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
index 380ac238a1..e777f28716 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
@@ -129,7 +129,7 @@ function isLoading(action: string) {
 	}
 
 	& + .permissions-overview-row {
-		border-top: var(--border-width) solid var(--border-subdued);
+		border-top: var(--theme--border-width) solid var(--border-subdued);
 	}
 }
 </style>
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index 14b2849aef..b83a950417 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -210,8 +210,8 @@ function useReset() {
 .table {
 	max-width: 792px;
 	background-color: var(--theme--form--field--input--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 }
 
 .system-toggle {
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index f90480928c..e8a86af27d 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -109,7 +109,7 @@ const fields = computed({
 		padding: 16px;
 		font-family: var(--theme--font-family-monospace);
 		background-color: var(--background-subdued);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 }
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 27daf1a346..6d983c1a58 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -71,7 +71,7 @@ const fields = computed(() => [
 		padding: 16px;
 		font-family: var(--theme--font-family-monospace);
 		background-color: var(--background-subdued);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 }
 </style>
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index d31aa5c0ab..de724341b7 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -460,7 +460,7 @@ function revert(values: Record<string, any>) {
 	margin-bottom: var(--form-vertical-gap);
 	padding: 20px;
 	background-color: var(--background-normal);
-	border-radius: calc(var(--border-radius) + 4px);
+	border-radius: calc(var(--theme--border-radius) + 4px);
 
 	.avatar {
 		--v-icon-color: var(--theme--foreground-subdued);
diff --git a/app/src/panels/bar-chart/panel-bar-chart.vue b/app/src/panels/bar-chart/panel-bar-chart.vue
index 03b8e5a396..7196de4efb 100644
--- a/app/src/panels/bar-chart/panel-bar-chart.vue
+++ b/app/src/panels/bar-chart/panel-bar-chart.vue
@@ -337,11 +337,11 @@ function setUpChart() {
 
 <style>
 .apexcharts-tooltip.apexcharts-theme-light {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 }
 
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 	margin-bottom: 0;
 	padding: 0 4px;
 	font-weight: 600 !important;
diff --git a/app/src/panels/line-chart/panel-line-chart.vue b/app/src/panels/line-chart/panel-line-chart.vue
index dc2b90c194..8bb253eed1 100644
--- a/app/src/panels/line-chart/panel-line-chart.vue
+++ b/app/src/panels/line-chart/panel-line-chart.vue
@@ -260,7 +260,7 @@ function setUpChart() {
 			},
 			crosshairs: {
 				stroke: {
-					color: 'var(--border-normal)',
+					color: 'var(--theme--form--field--input--border-color)',
 				},
 			},
 		},
@@ -329,11 +329,11 @@ function setUpChart() {
 
 <style>
 .apexcharts-tooltip.apexcharts-theme-light {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 }
 
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 	margin-bottom: 0;
 	padding: 0 4px;
 	font-weight: 600 !important;
diff --git a/app/src/panels/list/panel-list.vue b/app/src/panels/list/panel-list.vue
index 171953da4c..386d66b86f 100644
--- a/app/src/panels/list/panel-list.vue
+++ b/app/src/panels/list/panel-list.vue
@@ -95,10 +95,10 @@ async function saveEdits(item: Record<string, any>) {
 
 .v-list-item {
 	height: 48px;
-	border-top: var(--border-width) solid var(--border-subdued);
+	border-top: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .v-list-item:last-child {
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 }
 </style>
diff --git a/app/src/panels/metric-list/panel-metric-list.vue b/app/src/panels/metric-list/panel-metric-list.vue
index a66f84739f..d12cea755c 100644
--- a/app/src/panels/metric-list/panel-metric-list.vue
+++ b/app/src/panels/metric-list/panel-metric-list.vue
@@ -199,7 +199,7 @@ function getColor(input) {
 }
 .metric-list-item {
 	height: 36px;
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .metric-list-item:last-child {
diff --git a/app/src/panels/pie-chart/panel-pie-chart.vue b/app/src/panels/pie-chart/panel-pie-chart.vue
index 233dd67255..ef2915e58e 100644
--- a/app/src/panels/pie-chart/panel-pie-chart.vue
+++ b/app/src/panels/pie-chart/panel-pie-chart.vue
@@ -283,11 +283,11 @@ function checkMatchingConditionalFill(
 
 <style>
 .apexcharts-tooltip.apexcharts-theme-light {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 }
 
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 	margin-bottom: 0;
 	padding: 0 4px;
 	font-weight: 600 !important;
diff --git a/app/src/panels/time-series/panel-time-series.vue b/app/src/panels/time-series/panel-time-series.vue
index 5ddcb7a671..59bae795eb 100644
--- a/app/src/panels/time-series/panel-time-series.vue
+++ b/app/src/panels/time-series/panel-time-series.vue
@@ -250,7 +250,7 @@ function setupChart() {
 			},
 			crosshairs: {
 				stroke: {
-					color: 'var(--border-normal)',
+					color: 'var(--theme--form--field--input--border-color)',
 				},
 			},
 		},
@@ -343,11 +343,11 @@ function setupChart() {
 
 <style>
 .apexcharts-tooltip.apexcharts-theme-light {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 }
 
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-	border-color: var(--border-normal) !important;
+	border-color: var(--theme--form--field--input--border-color) !important;
 	margin-bottom: 0;
 	padding: 0 4px;
 	font-weight: 600 !important;
diff --git a/app/src/routes/login/components/sso-links.vue b/app/src/routes/login/components/sso-links.vue
index e286b19d5b..aa62510cff 100644
--- a/app/src/routes/login/components/sso-links.vue
+++ b/app/src/routes/login/components/sso-links.vue
@@ -95,7 +95,7 @@ const errorFormatted = computed(() => {
 	height: var(--input-height);
 	background-color: var(--background-normal);
 	border: $sso-link-border-width var(--background-normal) solid;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: border-color var(--fast) var(--transition);
 
 	.sso-icon {
@@ -105,7 +105,7 @@ const errorFormatted = computed(() => {
 		width: var(--input-height);
 		margin: -$sso-link-border-width;
 		background-color: var(--background-normal-alt);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 
 		span {
 			--v-icon-size: 28px;
diff --git a/app/src/routes/shared/shared.vue b/app/src/routes/shared/shared.vue
index b5f769d68c..88db98a25e 100644
--- a/app/src/routes/shared/shared.vue
+++ b/app/src/routes/shared/shared.vue
@@ -206,7 +206,7 @@ h2 {
 	width: calc(100% + 24px);
 	height: calc(100% + 24px);
 	background-color: var(--danger-alt);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: var(--medium) var(--transition);
 	transition-property: background-color, padding, margin;
 	content: '';
diff --git a/app/src/styles/_markdown.scss b/app/src/styles/_markdown.scss
index 649d4a310f..2d5b5e8973 100644
--- a/app/src/styles/_markdown.scss
+++ b/app/src/styles/_markdown.scss
@@ -100,7 +100,7 @@ code {
 	line-height: 24px;
 	overflow-wrap: break-word;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 pre {
@@ -111,7 +111,7 @@ pre {
 	font-family: var(--theme--font-family-monospace), monospace;
 	line-height: 24px;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 blockquote {
@@ -120,7 +120,7 @@ blockquote {
 	font-weight: 500;
 	font-size: 15px;
 	line-height: 24px;
-	border-left: 2px solid var(--border-normal);
+	border-left: 2px solid var(--theme--form--field--input--border-color);
 }
 
 blockquote blockquote {
@@ -132,14 +132,14 @@ iframe,
 img {
 	max-width: 100%;
 	height: auto;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 hr {
 	height: 1px;
 	margin-top: 2em;
 	margin-bottom: 2em;
-	background-color: var(--border-normal);
+	background-color: var(--theme--form--field--input--border-color);
 	border: none;
 }
 
@@ -153,7 +153,7 @@ table {
 table th,
 table td {
 	padding: 0.4rem;
-	border: 1px solid var(--border-normal);
+	border: 1px solid var(--theme--form--field--input--border-color);
 }
 
 figure {
diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
index b748ba2ee6..9fb3e4ea80 100644
--- a/app/src/styles/_variables.scss
+++ b/app/src/styles/_variables.scss
@@ -9,9 +9,6 @@
 	--slow: 300ms;
 	--header-bar-height: 61px;
 	--content-padding: 12px;
-	--border-width: 2px;
-	--border-radius-outline: 6px;
-	--border-radius: 4px;
 	--input-height: 52px;
 	--input-height-tall: 168px;
 	--input-height-max: 500px;
diff --git a/app/src/styles/lib/_codemirror.scss b/app/src/styles/lib/_codemirror.scss
index d8369eb3ff..cd58da91da 100644
--- a/app/src/styles/lib/_codemirror.scss
+++ b/app/src/styles/lib/_codemirror.scss
@@ -9,9 +9,10 @@
 	line-height: 22px;
 	direction: ltr;
 	background-color: var(--theme--form--field--input--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: all var(--fast) var(--transition);
+	box-shadow: var(--theme--form--field--input--box-shadow);
 }
 
 .disabled .CodeMirror {
@@ -24,16 +25,17 @@
 }
 
 .CodeMirror:hover {
-	border-color: var(--border-normal-alt);
+	border-color: var(--theme--form--field--input--border-color-hover);
+	box-shadow: var(--theme--form--field--input--box-shadow-hover);
 }
 
 .disabled .CodeMirror:hover {
-	border-color: var(--border-normal);
+	border-color: var(--theme--form--field--input--border-color);
 }
 
 .CodeMirror.CodeMirror-focused {
-	border-color: var(--theme--primary);
-	box-shadow: 0 0 16px -8px var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
+	box-shadow: var(--theme--form--field--input--box-shadow-focus);
 }
 
 /* PADDING */
@@ -56,7 +58,7 @@
 .CodeMirror-gutters {
 	white-space: nowrap;
 	background-color: var(--background-subdued);
-	border-right: 2px solid var(--border-normal);
+	border-right: 2px solid var(--theme--form--field--input--border-color);
 }
 
 .CodeMirror-linenumber {
@@ -157,7 +159,7 @@
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	border-left: 1px solid var(--border-normal);
+	border-left: 1px solid var(--theme--form--field--input--border-color);
 }
 
 /* DEFAULT THEME */
@@ -240,7 +242,7 @@
 	color: var(--theme--primary);
 }
 .cm-s-default .cm-hr {
-	color: var(--border-normal);
+	color: var(--theme--form--field--input--border-color);
 }
 .cm-s-default .cm-link {
 	color: var(--theme--primary);
@@ -286,7 +288,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 	padding: 4px 8px;
 	color: var(--foreground-inverted);
 	background-color: var(--background-inverted);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	font-family: var(--theme--font-family-monospace);
 	white-space: pre-wrap;
 	overflow: hidden;
diff --git a/app/src/styles/lib/_emoji-picker.scss b/app/src/styles/lib/_emoji-picker.scss
index cfafe32f84..d32c6c4b63 100644
--- a/app/src/styles/lib/_emoji-picker.scss
+++ b/app/src/styles/lib/_emoji-picker.scss
@@ -6,12 +6,12 @@
 		--dark-text-color: var(--theme--foreground);
 		--secondary-text-color: var(--theme--foreground-accent);
 		--dark-secondary-text-color: var(--theme--foreground-accent);
-		--dark-border-color: var(--border-normal);
+		--dark-border-color: var(--theme--form--field--input--border-color);
 		--dark-background-color: var(--background-subdued);
 
 		box-shadow: var(--card-shadow);
-		border-radius: var(--border-radius);
-		border: var(--border-width) solid var(--border-normal);
+		border-radius: var(--theme--border-radius);
+		border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 		background-color: var(--theme--background);
 	}
 
@@ -26,18 +26,18 @@
 		}
 
 		input.emoji-picker__search {
-			border-radius: var(--border-radius);
-			border: var(--border-width) solid var(--border-normal);
+			border-radius: var(--theme--border-radius);
+			border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 			background-color: var(--theme--background);
 
 			height: 100%;
 
 			&:hover {
-				border-color: var(--border-normal-alt);
+				border-color: var(--theme--form--field--input--border-color-hover);
 			}
 
 			&:focus {
-				border-color: var(--theme--primary);
+				border-color: var(--theme--form--field--input--border-color-focus);
 			}
 
 			&::placeholder {
@@ -71,18 +71,18 @@
 		}
 
 		.emoji-picker__emojis {
-			border-top: 2px solid var(--border-normal);
+			border-top: 2px solid var(--theme--form--field--input--border-color);
 		}
 	}
 
 	.emoji-picker__preview {
-		border-top: 2px solid var(--border-normal);
+		border-top: 2px solid var(--theme--form--field--input--border-color);
 	}
 
 	.emoji-picker__emoji {
 		&:hover {
 			background-color: var(--background-normal);
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 		}
 	}
 }
diff --git a/app/src/styles/lib/_flatpickr.scss b/app/src/styles/lib/_flatpickr.scss
index 366df6d99b..d12b818e48 100644
--- a/app/src/styles/lib/_flatpickr.scss
+++ b/app/src/styles/lib/_flatpickr.scss
@@ -9,7 +9,7 @@
 	overflow: hidden;
 	font-family: var(--v-input-font-family);
 	background: var(--card-face-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: none;
 }
 
@@ -70,7 +70,7 @@
 }
 
 .flatpickr-current-month .flatpickr-monthDropdown-months {
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	appearance: none;
 	text-align: right;
 	font-size: 16px;
@@ -95,7 +95,7 @@
 
 .flatpickr-current-month .numInputWrapper {
 	background: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	transition: background var(--fast) var(--transition);
 }
 
@@ -110,7 +110,7 @@
 }
 
 .flatpickr-current-month .numInputWrapper {
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .flatpickr-current-month .numInputWrapper span.arrowUp {
@@ -181,7 +181,7 @@ span.flatpickr-weekday {
 
 .flatpickr-day.today {
 	border-color: var(--theme--primary);
-	border-width: var(--border-width);
+	border-width: var(--theme--border-width);
 }
 
 .flatpickr-day.today:hover,
@@ -288,7 +288,7 @@ span.flatpickr-weekday {
 .flatpickr-calendar.hasTime .flatpickr-time {
 	height: 43px;
 	margin-top: 8px;
-	border-top: var(--border-width) solid var(--border-subdued);
+	border-top: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .flatpickr-calendar.noCalendar .flatpickr-time {
@@ -311,8 +311,8 @@ span.flatpickr-weekday {
 
 .flatpickr-time input:focus,
 .flatpickr-time .flatpickr-am-pm:focus {
-	border: var(--border-width) solid var(--theme--primary);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--primary);
+	border-radius: var(--theme--border-radius);
 	background-color: var(--theme--form--field--input--background);
 }
 
@@ -324,7 +324,7 @@ span.flatpickr-weekday {
 	width: 100%;
 	padding: 8px 0;
 	color: var(--theme--primary);
-	border-top: var(--border-width) solid var(--border-subdued);
+	border-top: var(--theme--border-width) solid var(--border-subdued);
 	transition: background-color var(--fast) var(--transition);
 }
 
diff --git a/app/src/styles/lib/_frappe-charts.scss b/app/src/styles/lib/_frappe-charts.scss
index 5de71bc678..108003addf 100644
--- a/app/src/styles/lib/_frappe-charts.scss
+++ b/app/src/styles/lib/_frappe-charts.scss
@@ -8,7 +8,7 @@
 		fill: var(--theme--foreground);
 
 		line {
-			stroke: var(--border-normal);
+			stroke: var(--theme--form--field--input--border-color);
 		}
 	}
 
@@ -65,7 +65,7 @@
 	position: absolute;
 	z-index: 99999;
 	padding: 10px;
-	color: var(--border-normal);
+	color: var(--theme--form--field--input--border-color);
 	font-size: 12px;
 	text-align: center;
 	background: rgba(0, 0, 0, 0.8);
diff --git a/app/src/styles/lib/_fullcalendar.scss b/app/src/styles/lib/_fullcalendar.scss
index ce59de22a5..d7ac051d82 100644
--- a/app/src/styles/lib/_fullcalendar.scss
+++ b/app/src/styles/lib/_fullcalendar.scss
@@ -9,7 +9,7 @@
 	--fc-button-active-border-color: transparent;
 	--fc-button-hover-border-color: transparent;
 	--fc-button-text-color: var(--theme--foreground-subdued);
-	--fc-border-color: var(--border-normal);
+	--fc-border-color: var(--theme--form--field--input--border-color);
 	--fc-highlight-color: var(--theme--primary-background);
 	--fc-neutral-bg-color: var(--background-normal);
 	--fc-list-event-hover-bg-color: var(--background-subdued);
diff --git a/app/src/styles/lib/_mapbox.scss b/app/src/styles/lib/_mapbox.scss
index 80c22a8365..65cb8bdcab 100644
--- a/app/src/styles/lib/_mapbox.scss
+++ b/app/src/styles/lib/_mapbox.scss
@@ -143,12 +143,12 @@
 
 .mapboxgl-ctrl-geocoder--input {
 	color: var(--theme--foreground) !important;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .mapboxgl-ctrl-geocoder .suggestions {
 	background-color: var(--background-subdued);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .mapboxgl-ctrl-geocoder .suggestions > li > a {
diff --git a/app/src/styles/themes/_dark.scss b/app/src/styles/themes/_dark.scss
index 58d362aa11..4df595c838 100644
--- a/app/src/styles/themes/_dark.scss
+++ b/app/src/styles/themes/_dark.scss
@@ -11,8 +11,6 @@
 
 	color-scheme: dark;
 
-	--border-normal: #30363d;
-	--border-normal-alt: #484f58;
 	--border-subdued: #21262d;
 
 	--foreground-inverted: #0d1117;
@@ -31,7 +29,6 @@
 	--card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), 0.2);
 	--overlay-color: rgba(0, 0, 0, 0.9);
 
-	--header-shadow: 0 4px 7px -4px rgb(var(--black) / 0.2);
 	--navigation-shadow: 0px 0px 12px var(--black);
 	--sidebar-shadow: var(--navigation-shadow);
 
diff --git a/app/src/styles/themes/_light.scss b/app/src/styles/themes/_light.scss
index 9ef4de3cdb..c8b417c432 100644
--- a/app/src/styles/themes/_light.scss
+++ b/app/src/styles/themes/_light.scss
@@ -2,8 +2,6 @@
 @mixin light {
 	color-scheme: light;
 
-	--border-normal: #d3dae4;
-	--border-normal-alt: #a2b5cd;
 	--border-subdued: #f0f4f9;
 
 	--foreground-inverted: #fff;
@@ -22,7 +20,6 @@
 	--card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), 0.2);
 	--overlay-color: rgba(38, 50, 56, 0.8);
 
-	--header-shadow: 0 4px 7px -4px rgb(0 0 0 / 0.2);
 	--navigation-shadow: 4px 0 7px -4px rgb(0 0 0 / 0.2);
 	--sidebar-shadow: -4px 0 7px -4px rgb(0 0 0 / 0.2);
 
diff --git a/app/src/views/private/components/basic-import-sidebar-detail.vue b/app/src/views/private/components/basic-import-sidebar-detail.vue
index 701508f2be..465daf4e0f 100644
--- a/app/src/views/private/components/basic-import-sidebar-detail.vue
+++ b/app/src/views/private/components/basic-import-sidebar-detail.vue
@@ -204,8 +204,8 @@ const createAllowed = computed<boolean>(() => hasPermission(collection.value, 'c
 	padding-bottom: 0px;
 	color: var(--white);
 	background-color: var(--theme--primary);
-	border: var(--border-width) solid var(--theme--primary);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--primary);
+	border-radius: var(--theme--border-radius);
 
 	.type-text {
 		display: flex;
@@ -230,7 +230,7 @@ const createAllowed = computed<boolean>(() => hasPermission(collection.value, 'c
 	margin-left: -8px;
 	overflow: hidden;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	&.has-file {
 		background-color: var(--theme--primary-background);
diff --git a/app/src/views/private/components/comment-input.vue b/app/src/views/private/components/comment-input.vue
index 00b2dc1a07..666707a57d 100644
--- a/app/src/views/private/components/comment-input.vue
+++ b/app/src/views/private/components/comment-input.vue
@@ -364,15 +364,15 @@ function pressedEnter() {
 	overflow: scroll;
 	white-space: pre;
 	background-color: var(--theme--form--field--input--background);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
+	border-radius: var(--theme--border-radius);
 	transition: border-color var(--fast) var(--transition);
 }
 
 .new-comment:focus {
 	position: relative;
 	overflow: scroll;
-	border-color: var(--theme--primary);
+	border-color: var(--theme--form--field--input--border-color-focus);
 	transition: margin-bottom var(--fast) var(--transition);
 }
 
diff --git a/app/src/views/private/components/comment-item.vue b/app/src/views/private/components/comment-item.vue
index ca5df15cb3..bb14a6f448 100644
--- a/app/src/views/private/components/comment-item.vue
+++ b/app/src/views/private/components/comment-item.vue
@@ -84,7 +84,7 @@ function useEdits() {
 	margin-bottom: 8px;
 	padding: 8px;
 	background-color: var(--theme--background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .comment-item:last-of-type {
@@ -120,13 +120,13 @@ function useEdits() {
 	padding-left: 6px;
 	color: var(--theme--foreground-subdued);
 	font-style: italic;
-	border-left: 2px solid var(--border-normal);
+	border-left: 2px solid var(--theme--form--field--input--border-color);
 }
 
 .comment-item .content :deep(img) {
 	max-width: 100%;
 	margin: 8px 0;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	display: block;
 }
 
@@ -134,7 +134,7 @@ function useEdits() {
 	height: 2px;
 	margin: 12px 0;
 	border: 0;
-	border-top: 2px solid var(--border-normal);
+	border-top: 2px solid var(--theme--form--field--input--border-color);
 }
 
 .comment-item .content :deep(mark) {
@@ -143,7 +143,7 @@ function useEdits() {
 	color: var(--theme--primary);
 	line-height: 1;
 	background: var(--theme--primary-background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	user-select: text;
 	pointer-events: none;
 }
@@ -152,7 +152,7 @@ function useEdits() {
 	padding: 2px 4px;
 	color: var(--theme--foreground);
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	margin: 2px 0;
 	font-family: var(--theme--font-family-monospace);
 	white-space: nowrap;
@@ -164,7 +164,7 @@ function useEdits() {
 	padding: 2px 4px;
 	color: var(--theme--foreground);
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	margin: 2px 0;
 	font-family: var(--theme--font-family-monospace);
 }
diff --git a/app/src/views/private/components/export-sidebar-detail.vue b/app/src/views/private/components/export-sidebar-detail.vue
index 543f80de8a..52c04da2d8 100644
--- a/app/src/views/private/components/export-sidebar-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail.vue
@@ -641,8 +641,8 @@ const createAllowed = computed<boolean>(() => hasPermission(collection.value, 'c
 	padding-bottom: 0px;
 	color: var(--white);
 	background-color: var(--theme--primary);
-	border: var(--border-width) solid var(--theme--primary);
-	border-radius: var(--border-radius);
+	border: var(--theme--border-width) solid var(--theme--primary);
+	border-radius: var(--theme--border-radius);
 
 	.type-text {
 		display: flex;
@@ -667,7 +667,7 @@ const createAllowed = computed<boolean>(() => hasPermission(collection.value, 'c
 	margin-left: -8px;
 	overflow: hidden;
 	background-color: var(--background-normal);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	&.has-file {
 		background-color: var(--theme--primary-background);
diff --git a/app/src/views/private/components/file-preview.vue b/app/src/views/private/components/file-preview.vue
index ef1929ea3f..3eda31d1a9 100644
--- a/app/src/views/private/components/file-preview.vue
+++ b/app/src/views/private/components/file-preview.vue
@@ -91,13 +91,13 @@ const authenticatedSrc = computed(() => addTokenToURL(getRootPath() + src.value)
 		max-width: 100%;
 		max-height: v-bind(maxHeight);
 		object-fit: contain;
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	.image,
 	.video {
 		background-color: var(--background-normal);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	.image {
@@ -124,7 +124,7 @@ const authenticatedSrc = computed(() => addTokenToURL(getRootPath() + src.value)
 		align-items: center;
 		justify-content: center;
 		height: var(--input-height-tall);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 
 	&.svg,
diff --git a/app/src/views/private/components/folder-picker.vue b/app/src/views/private/components/folder-picker.vue
index 24a246598b..6402d5358a 100644
--- a/app/src/views/private/components/folder-picker.vue
+++ b/app/src/views/private/components/folder-picker.vue
@@ -153,7 +153,7 @@ function parseFolder(id: string) {
 
 	padding: 12px;
 	background-color: var(--folder-picker-background-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	max-height: calc(var(--input-height-tall) * 2);
 	overflow: auto;
 }
diff --git a/app/src/views/private/components/header-bar.vue b/app/src/views/private/components/header-bar.vue
index 143ba4a954..969661e4a8 100644
--- a/app/src/views/private/components/header-bar.vue
+++ b/app/src/views/private/components/header-bar.vue
@@ -91,12 +91,13 @@ onUnmounted(() => {
 	align-items: center;
 	justify-content: flex-start;
 	width: 100%;
-	height: var(--header-bar-height);
+	height: calc(var(--header-bar-height) + var(--theme--header--border-width));
 	margin: 0;
 	padding: 0 10px;
 	background-color: var(--theme--header--background);
 	box-shadow: 0;
 	transition: box-shadow var(--medium) var(--transition), margin var(--fast) var(--transition);
+	border-bottom: var(--theme--header--border-width) solid var(--theme--header--border-color);
 
 	.nav-toggle {
 		@media (min-width: 960px) {
@@ -191,7 +192,7 @@ onUnmounted(() => {
 
 	&.collapsed.shadow,
 	&.small.shadow {
-		box-shadow: var(--header-shadow);
+		box-shadow: var(--theme--header--box-shadow);
 
 		.title-container {
 			.headline {
diff --git a/app/src/views/private/components/image-editor.vue b/app/src/views/private/components/image-editor.vue
index d02ce6471b..bec2b56bb2 100644
--- a/app/src/views/private/components/image-editor.vue
+++ b/app/src/views/private/components/image-editor.vue
@@ -539,7 +539,7 @@ function setAspectRatio() {
 .toolbar-button {
 	padding: 8px;
 	background-color: rgb(255 255 255 / 0.2);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	cursor: pointer;
 	transition: background-color var(--fast) var(--transition);
 
diff --git a/app/src/views/private/components/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar.vue
index 073ee7bb5a..7c61a282c1 100644
--- a/app/src/views/private/components/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar.vue
@@ -116,7 +116,7 @@ const userFullName = userStore.fullName ?? undefined;
 				top: -1px;
 				right: 8px;
 				left: 8px;
-				height: 2px;
+				height: var(--theme--border-width);
 				background-color: var(--theme--navigation--modules--button--foreground);
 				opacity: 0.25;
 				content: '';
diff --git a/app/src/views/private/components/module-bar.vue b/app/src/views/private/components/module-bar.vue
index 0e97b57d90..9877728974 100644
--- a/app/src/views/private/components/module-bar.vue
+++ b/app/src/views/private/components/module-bar.vue
@@ -82,6 +82,10 @@ const modules = computed(() => {
 	width: 60px;
 	height: 100%;
 	background-color: var(--theme--navigation--modules--background);
+	border-right: var(--theme--navigation--modules--border-width) solid var(--theme--navigation--modules--border-color);
+
+	/* Explicitly render the border outside of the width of the bar itself */
+	box-sizing: content-box;
 
 	.modules {
 		flex-grow: 1;
diff --git a/app/src/views/private/components/notification-item.vue b/app/src/views/private/components/notification-item.vue
index 840ca6a886..8d7d96a649 100644
--- a/app/src/views/private/components/notification-item.vue
+++ b/app/src/views/private/components/notification-item.vue
@@ -56,7 +56,7 @@ function close() {
 	margin-top: 4px;
 	padding: 12px;
 	color: var(--white);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	.icon {
 		display: block;
diff --git a/app/src/views/private/components/project-info.vue b/app/src/views/private/components/project-info.vue
index 1cea67348e..55b89b6505 100644
--- a/app/src/views/private/components/project-info.vue
+++ b/app/src/views/private/components/project-info.vue
@@ -25,11 +25,12 @@ const descriptor = computed(() => serverStore.info?.project?.project_descriptor)
 	display: flex;
 	align-items: center;
 	width: 100%;
-	height: 60px;
+	height: calc(60px + var(--theme--navigation--project--border-width));
 	padding-left: 20px;
 	color: var(--theme--navigation--project--foreground);
 	text-align: left;
 	background: var(--theme--navigation--project--background);
+	border-bottom: var(--theme--navigation--project--border-width) solid var(--theme--navigation--project--border-color);
 
 	.name-container {
 		flex-grow: 1;
diff --git a/app/src/views/private/components/revision-item.vue b/app/src/views/private/components/revision-item.vue
index 57bf5ea65a..f5910db542 100644
--- a/app/src/views/private/components/revision-item.vue
+++ b/app/src/views/private/components/revision-item.vue
@@ -131,7 +131,7 @@ const user = computed(() => {
 		width: calc(100% + 32px);
 		height: calc(100% + 10px);
 		background-color: var(--background-normal-alt);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		opacity: 0;
 		transition: opacity var(--fast) var(--transition);
 		content: '';
diff --git a/app/src/views/private/components/revisions-drawer-updates-change.vue b/app/src/views/private/components/revisions-drawer-updates-change.vue
index 3272bf15e2..4c059d43c0 100644
--- a/app/src/views/private/components/revisions-drawer-updates-change.vue
+++ b/app/src/views/private/components/revisions-drawer-updates-change.vue
@@ -58,7 +58,7 @@ const wholeThing = computed(() => {
 	position: relative;
 	width: 100%;
 	padding: 8px 12px 8px 40px;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	.v-icon {
 		position: absolute;
@@ -69,7 +69,7 @@ const wholeThing = computed(() => {
 	&.added {
 		color: var(--theme--success);
 		background-color: var(--success-alt);
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
+		border-radius: 0 0 var(--theme--border-radius) var(--theme--border-radius);
 
 		.changed {
 			background-color: var(--success-25);
@@ -79,7 +79,7 @@ const wholeThing = computed(() => {
 	&.deleted {
 		color: var(--theme--danger);
 		background-color: var(--danger-alt);
-		border-radius: var(--border-radius) var(--border-radius) 0 0;
+		border-radius: var(--theme--border-radius) var(--theme--border-radius) 0 0;
 
 		.changed {
 			background-color: var(--danger-25);
@@ -89,7 +89,7 @@ const wholeThing = computed(() => {
 	&.updated {
 		color: var(--theme--warning);
 		background-color: var(--warning-alt);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 	}
 }
 
@@ -97,7 +97,7 @@ const wholeThing = computed(() => {
 	position: relative;
 	margin-right: 0.2em;
 	padding: 2px;
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .no-value {
diff --git a/app/src/views/private/components/search-input.vue b/app/src/views/private/components/search-input.vue
index 2e878fb71d..0f5bdffdcb 100644
--- a/app/src/views/private/components/search-input.vue
+++ b/app/src/views/private/components/search-input.vue
@@ -165,7 +165,7 @@ function emitValue() {
 	max-width: 100%;
 	height: 44px;
 	overflow: hidden;
-	border: 2px solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	border-radius: calc(44px / 2);
 	transition: width var(--slow) var(--transition), border-bottom-left-radius var(--fast) var(--transition),
 		border-bottom-right-radius var(--fast) var(--transition);
@@ -197,7 +197,7 @@ function emitValue() {
 	}
 
 	&:hover {
-		border-color: var(--border-normal-alt);
+		border-color: var(--theme--form--field--input--border-color-hover);
 	}
 
 	&.has-content {
@@ -214,7 +214,7 @@ function emitValue() {
 
 	&.active {
 		width: 300px;
-		border-color: var(--border-normal);
+		border-color: var(--theme--form--field--input--border-color);
 
 		.icon-empty {
 			display: block;
@@ -294,7 +294,7 @@ function emitValue() {
 	min-width: 100%;
 	padding: 0;
 	background-color: var(--background-subdued);
-	border: 2px solid var(--border-normal);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	border-bottom-right-radius: 22px;
 	border-bottom-left-radius: 22px;
 }
diff --git a/app/src/views/private/components/share-item.vue b/app/src/views/private/components/share-item.vue
index 8d26e692c6..90db8e618f 100644
--- a/app/src/views/private/components/share-item.vue
+++ b/app/src/views/private/components/share-item.vue
@@ -104,7 +104,7 @@ const formattedTime = computed(() => {
 	margin-bottom: 8px;
 	padding: 8px;
 	background-color: var(--theme--background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 }
 
 .item-date {
diff --git a/app/src/views/private/components/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail.vue
index 65dad3c041..3c3a077b90 100644
--- a/app/src/views/private/components/sidebar-detail.vue
+++ b/app/src/views/private/components/sidebar-detail.vue
@@ -68,9 +68,11 @@ const { sidebarOpen } = toRefs(appStore);
 		flex-shrink: 0;
 		justify-content: space-between;
 		width: 100%;
-		height: 60px;
+		height: calc(60px + var(--theme--sidebar--section--toggle--border-width));
 		color: var(--theme--sidebar--section--toggle--foreground);
 		background-color: var(--theme--sidebar--section--toggle--background);
+		border-bottom: var(--theme--sidebar--section--toggle--border-width) solid
+			var(--theme--sidebar--section--toggle--border-color);
 
 		.icon {
 			--v-icon-color: var(--theme--sidebar--section--toggle--icon--foreground);
diff --git a/app/src/views/private/components/value-null.vue b/app/src/views/private/components/value-null.vue
index 6e53f8e940..27836f9d0f 100644
--- a/app/src/views/private/components/value-null.vue
+++ b/app/src/views/private/components/value-null.vue
@@ -4,6 +4,6 @@
 
 <style scoped>
 .null {
-	color: var(--border-normal); /* Don't confuse NULL with subdued value */
+	color: var(--theme--form--field--input--border-color); /* Don't confuse NULL with subdued value */
 }
 </style>
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 92e1cb0c0c..34bc1d1d8a 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -387,6 +387,7 @@ function getWidth(input: unknown, fallback: number): number {
 		transform: translateX(-100%);
 		transition: transform var(--slow) var(--transition);
 		font-family: var(--theme--navigation--list--font-family);
+		border-right: var(--theme--navigation--border-width) solid var(--theme--navigation--border-color);
 
 		&.is-open {
 			transform: translateX(0);
@@ -427,7 +428,6 @@ function getWidth(input: unknown, fallback: number): number {
 	}
 
 	#main-content {
-		--border-radius: 6px;
 		--input-height: 60px;
 		--input-padding: 16px;
 		/* (60 - 4 - 24) / 2 */
@@ -502,6 +502,10 @@ function getWidth(input: unknown, fallback: number): number {
 		transform: translateX(100%);
 		transition: transform var(--slow) var(--transition);
 		font-family: var(--theme--sidebar--font-family);
+		border-left: var(--theme--sidebar--border-width) solid var(--theme--sidebar--border-color);
+
+		/* Explicitly render the border outside of the width of the bar itself */
+		box-sizing: content-box;
 
 		.spacer {
 			flex-grow: 1;
@@ -522,7 +526,7 @@ function getWidth(input: unknown, fallback: number): number {
 		}
 
 		@media (min-width: 960px) {
-			transform: translateX(calc(100% - 60px));
+			transform: translateX(calc(100% - 60px - var(--theme--sidebar--border-width)));
 		}
 
 		@media (min-width: 1260px) {
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index 5b5f80eb7a..1814c6349d 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useServerStore } from '@/stores/server';
-import { getRootPath } from '@/utils/get-root-path';
 import { getAppearance } from '@/utils/get-appearance';
+import { getRootPath } from '@/utils/get-root-path';
 import { cssVar } from '@directus/utils/browser';
 import Color from 'color';
 import { storeToRefs } from 'pinia';
@@ -62,10 +62,6 @@ const colors = computed(() => {
 	};
 });
 
-const isBranded = computed(() => {
-	return info.value?.project?.project_color ? true : false;
-});
-
 const hasCustomBackground = computed(() => {
 	return !!info.value?.project?.public_background;
 });
@@ -94,7 +90,7 @@ const logoURL = computed<string | null>(() => {
 </script>
 
 <template>
-	<div class="public-view" :class="{ branded: isBranded }">
+	<div class="public-view">
 		<div class="container" :class="{ wide }">
 			<div class="title-box">
 				<div
@@ -172,7 +168,6 @@ const logoURL = computed<string | null>(() => {
 	}
 
 	.container {
-		--border-radius: 6px;
 		--input-height: 60px;
 		--input-padding: 16px; /* (60 - 4 - 24) / 2 */
 
@@ -308,7 +303,7 @@ const logoURL = computed<string | null>(() => {
 		width: 56px;
 		height: 56px;
 		background-color: var(--project-color);
-		border-radius: calc(var(--border-radius) - 2px);
+		border-radius: calc(var(--theme--border-radius) - 2px);
 
 		img {
 			width: 40px;
@@ -317,21 +312,6 @@ const logoURL = computed<string | null>(() => {
 			object-position: center center;
 		}
 	}
-
-	&.branded :deep(.v-button) {
-		--v-button-background-color: var(--theme--foreground-accent);
-		--v-button-background-color-hover: var(--theme--foreground-accent);
-		--v-button-background-color-active: var(--theme--foreground-accent);
-	}
-
-	&.branded :deep(.v-input) {
-		--v-input-border-color-focus: var(--theme--foreground);
-		--v-input-box-shadow-color-focus: var(--theme--foreground);
-	}
-
-	&.branded :deep(.v-input.solid) {
-		--v-input-border-color-focus: var(--theme--foreground-subdued);
-	}
 }
 
 .scale-enter-active,
diff --git a/app/src/views/shared/shared-view.vue b/app/src/views/shared/shared-view.vue
index f7219cec32..918b1753f9 100644
--- a/app/src/views/shared/shared-view.vue
+++ b/app/src/views/shared/shared-view.vue
@@ -63,7 +63,6 @@ const logoURL = computed<string | null>(() => {
 
 <style scoped lang="scss">
 .shared {
-	--border-radius: 6px;
 	--input-height: 60px;
 	--input-padding: 16px;
 
@@ -82,7 +81,7 @@ header {
 	margin-bottom: 32px;
 	padding: 10px;
 	background-color: var(--theme--background);
-	border-bottom: var(--border-width) solid var(--border-subdued);
+	border-bottom: var(--theme--border-width) solid var(--border-subdued);
 }
 
 .container {
@@ -122,7 +121,7 @@ header {
 	width: 60px;
 	height: 60px;
 	background-color: var(--project-color);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 
 	img {
 		width: 40px;
@@ -135,7 +134,7 @@ header {
 .content {
 	padding: 32px;
 	background-color: var(--theme--background);
-	border-radius: var(--border-radius);
+	border-radius: var(--theme--border-radius);
 	box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
 }
 
@@ -150,7 +149,7 @@ header {
 		max-width: 856px;
 		padding: 32px;
 		background-color: var(--theme--background);
-		border-radius: var(--border-radius);
+		border-radius: var(--theme--border-radius);
 		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
 
 		@media (min-width: 618px) {
diff --git a/docs/guides/extensions/interfaces-radio-selector-icons.md b/docs/guides/extensions/interfaces-radio-selector-icons.md
index 13283c250d..7192bde680 100644
--- a/docs/guides/extensions/interfaces-radio-selector-icons.md
+++ b/docs/guides/extensions/interfaces-radio-selector-icons.md
@@ -406,10 +406,10 @@ under the closing `script` tag:
 		width: 100%;
 		height: auto;
 		padding: 10px; // 14 - 4 (border)
-		border: 2px solid var(--border-normal);
-		border-radius: var(--border-radius);
+		border: 2px solid var(--theme--form--field--input--border-color);
+		border-radius: var(--theme--border-radius);
         &:hover {
-            border-color: var(--border-normal-alt);
+            border-color: var(--theme--form--field--input--border-color-hover);
         }
 		&::before {
 			position: absolute;
@@ -418,7 +418,7 @@ under the closing `script` tag:
 			width: 100%;
 			height: 100%;
 			background-color: var(--background-subdued);
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 			content: '';
 		}
 		.label {
@@ -733,10 +733,10 @@ export default {
 		width: 100%;
 		height: auto;
 		padding: 10px; // 14 - 4 (border)
-		border: 2px solid var(--border-normal);
-		border-radius: var(--border-radius);
+		border: 2px solid var(--theme--form--field--input--border-color);
+		border-radius: var(--theme--border-radius);
         &:hover {
-            border-color: var(--border-normal-alt);
+            border-color: var(--theme--form--field--input--border-color-hover);
         }
 		&::before {
 			position: absolute;
@@ -745,7 +745,7 @@ export default {
 			width: 100%;
 			height: 100%;
 			background-color: var(--background-subdued);
-			border-radius: var(--border-radius);
+			border-radius: var(--theme--border-radius);
 			content: '';
 		}
 		.label {
diff --git a/docs/guides/extensions/panels-create-items.md b/docs/guides/extensions/panels-create-items.md
index f939c852bb..8e4b5ee7b8 100644
--- a/docs/guides/extensions/panels-create-items.md
+++ b/docs/guides/extensions/panels-create-items.md
@@ -324,8 +324,8 @@ Lastly, replace the CSS at the bottom with this:
 	margin-bottom: var(--form-vertical-gap);
 }
 .form-response {
-	border-radius: var(--border-radius);
-	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--theme--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	margin: 1em 0;
 	min-width: 300px;
 }
@@ -591,8 +591,8 @@ export default {
 	margin-bottom: var(--form-vertical-gap);
 }
 .form-response {
-	border-radius: var(--border-radius);
-	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--theme--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	margin: 1em 0;
 	min-width: 300px;
 }
diff --git a/docs/guides/extensions/panels-display-data-vonage.md b/docs/guides/extensions/panels-display-data-vonage.md
index b76d10d4d2..975ee0c19a 100644
--- a/docs/guides/extensions/panels-display-data-vonage.md
+++ b/docs/guides/extensions/panels-display-data-vonage.md
@@ -420,7 +420,7 @@ Lastly, replace the CSS at the bottom with this:
 .messages-table { padding: 12px; height: 100%; overflow: scroll; }
 .messages-table table { width: 100%; min-width: 600px; }
 .messages-table table tr td,
-.messages-table table tr th { vertical-align: top; border-top: var(--border-width) solid var(--border-subdued); padding: 10px; }
+.messages-table table tr th { vertical-align: top; border-top: var(--theme--border-width) solid var(--border-subdued); padding: 10px; }
 .ucwords { text-transform: capitalize; }
 .nowrap { white-space: nowrap; }
 .message { min-width: 260px; }
@@ -753,7 +753,7 @@ export default {
 .messages-table table tr td,
 .messages-table table tr th {
 	vertical-align: top;
-	border-top: var(--border-width) solid var(--border-subdued);
+	border-top: var(--theme--border-width) solid var(--border-subdued);
 	padding: 10px;
 }
 .ucwords {
diff --git a/docs/guides/extensions/panels-send-sms-twilio.md b/docs/guides/extensions/panels-send-sms-twilio.md
index 0a78a9bb1c..33afb64876 100644
--- a/docs/guides/extensions/panels-send-sms-twilio.md
+++ b/docs/guides/extensions/panels-send-sms-twilio.md
@@ -620,8 +620,8 @@ Add the following CSS:
 
 .sms-message {
 	padding: var(--input-padding);
-	border-radius: var(--border-radius);
-	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--theme--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	margin: 1em 0;
 }
 
@@ -1115,8 +1115,8 @@ export default {
 
 .sms-message {
 	padding: var(--input-padding);
-	border-radius: var(--border-radius);
-	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--theme--border-radius);
+	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	margin: 1em 0;
 }
 
diff --git a/packages/themes/src/index.ts b/packages/themes/src/index.ts
index 39e3d3a34c..8985cf38a8 100644
--- a/packages/themes/src/index.ts
+++ b/packages/themes/src/index.ts
@@ -1,4 +1,4 @@
-export { Definitions, ThemeSchema, TypeId, type Theme } from './schema.js';
-export { useThemeStore } from './store.js';
+export * from './schema.js';
+export * from './store.js';
+export * from './use-theme.js';
 export { default as ThemeProvider } from './theme-provider.vue';
-export { useTheme } from './use-theme.js';
diff --git a/packages/themes/src/schema.ts b/packages/themes/src/schema.ts
index 667c36443e..28cb0cb967 100644
--- a/packages/themes/src/schema.ts
+++ b/packages/themes/src/schema.ts
@@ -1,140 +1,176 @@
 import type { Static } from '@sinclair/typebox';
 import { Type } from '@sinclair/typebox';
 
-export const TypeId = {
-	Color: 'Color',
-	FontFamily: 'FontFamily',
-};
+const Color = Type.String({ $id: 'Color' });
+const FamilyName = Type.String({ $id: 'FamilyName' });
+const Length = Type.String({ $id: 'Length' });
+const Percentage = Type.String({ $id: 'Percentage' });
+const BoxShadow = Type.String({ $id: 'BoxShadow' });
 
-const Color = Type.Ref(Type.String({ $id: TypeId.Color }));
-const FontFamily = Type.Ref(Type.String({ $id: TypeId.FontFamily }));
+const LineWidth = Type.Union([Type.String(), Type.Literal('thin'), Type.Literal('medium'), Type.Literal('thick')], {
+	$id: 'LineWidth',
+});
 
 const Rules = Type.Object({
-	foreground: Color,
-	foregroundSubdued: Color,
-	foregroundAccent: Color,
+	//////////////////////////////////////////////////////////////////////////////////////////////////////////
+	// Base color palette
+	foreground: Type.Ref(Color),
+	foregroundSubdued: Type.Ref(Color),
+	foregroundAccent: Type.Ref(Color),
 
-	background: Color,
+	background: Type.Ref(Color),
 
-	primary: Color,
-	primaryBackground: Color,
-	primarySubdued: Color,
-	primaryAccent: Color,
+	primary: Type.Ref(Color),
+	primaryBackground: Type.Ref(Color),
+	primarySubdued: Type.Ref(Color),
+	primaryAccent: Type.Ref(Color),
 
-	secondary: Color,
-	secondaryBackground: Color,
-	secondarySubdued: Color,
-	secondaryAccent: Color,
+	secondary: Type.Ref(Color),
+	secondaryBackground: Type.Ref(Color),
+	secondarySubdued: Type.Ref(Color),
+	secondaryAccent: Type.Ref(Color),
 
-	success: Color,
-	successBackground: Color,
-	successSubdued: Color,
-	successAccent: Color,
+	success: Type.Ref(Color),
+	successBackground: Type.Ref(Color),
+	successSubdued: Type.Ref(Color),
+	successAccent: Type.Ref(Color),
 
-	warning: Color,
-	warningBackground: Color,
-	warningSubdued: Color,
-	warningAccent: Color,
+	warning: Type.Ref(Color),
+	warningBackground: Type.Ref(Color),
+	warningSubdued: Type.Ref(Color),
+	warningAccent: Type.Ref(Color),
 
-	danger: Color,
-	dangerBackground: Color,
-	dangerSubdued: Color,
-	dangerAccent: Color,
+	danger: Type.Ref(Color),
+	dangerBackground: Type.Ref(Color),
+	dangerSubdued: Type.Ref(Color),
+	dangerAccent: Type.Ref(Color),
 
-	fontFamilyDisplay: FontFamily,
-	fontFamilySansSerif: FontFamily,
-	fontFamilySerif: FontFamily,
-	fontFamilyMonospace: FontFamily,
+	//////////////////////////////////////////////////////////////////////////////////////////////////////////
+	// Base fonts
+	fontFamilyDisplay: Type.Ref(FamilyName),
+	fontFamilySansSerif: Type.Ref(FamilyName),
+	fontFamilySerif: Type.Ref(FamilyName),
+	fontFamilyMonospace: Type.Ref(FamilyName),
 
+	//////////////////////////////////////////////////////////////////////////////////////////////////////////
+	// Base border styles
+	borderRadius: Type.Union([Type.Ref(Length), Type.Ref(Percentage)]),
+	borderWidth: Type.Ref(LineWidth),
+
+	//////////////////////////////////////////////////////////////////////////////////////////////////////////
+	// Scopes
 	navigation: Type.Object({
-		background: Color,
+		background: Type.Ref(Color),
+		borderWidth: Type.Ref(LineWidth),
+		borderColor: Type.Ref(Color),
 
 		project: Type.Object({
-			background: Color,
-			foreground: Color,
-			fontFamily: FontFamily,
+			background: Type.Ref(Color),
+			foreground: Type.Ref(Color),
+			fontFamily: Type.Ref(FamilyName),
+			borderWidth: Type.Ref(LineWidth),
+			borderColor: Type.Ref(Color),
 		}),
 
 		modules: Type.Object({
-			background: Color,
-			button: Type.Object({
-				foreground: Color,
-				foregroundHover: Color,
-				foregroundActive: Color,
+			background: Type.Ref(Color),
+			borderWidth: Type.Ref(LineWidth),
+			borderColor: Type.Ref(Color),
 
-				background: Color,
-				backgroundHover: Color,
-				backgroundActive: Color,
+			button: Type.Object({
+				foreground: Type.Ref(Color),
+				foregroundHover: Type.Ref(Color),
+				foregroundActive: Type.Ref(Color),
+
+				background: Type.Ref(Color),
+				backgroundHover: Type.Ref(Color),
+				backgroundActive: Type.Ref(Color),
 			}),
 		}),
 
 		list: Type.Object({
 			icon: Type.Object({
-				foreground: Color,
-				foregroundHover: Color,
-				foregroundActive: Color,
+				foreground: Type.Ref(Color),
+				foregroundHover: Type.Ref(Color),
+				foregroundActive: Type.Ref(Color),
 			}),
 
-			foreground: Color,
-			foregroundHover: Color,
-			foregroundActive: Color,
+			foreground: Type.Ref(Color),
+			foregroundHover: Type.Ref(Color),
+			foregroundActive: Type.Ref(Color),
 
-			background: Color,
-			backgroundHover: Color,
-			backgroundActive: Color,
+			background: Type.Ref(Color),
+			backgroundHover: Type.Ref(Color),
+			backgroundActive: Type.Ref(Color),
 
-			fontFamily: FontFamily,
+			fontFamily: Type.Ref(FamilyName),
 		}),
 	}),
 
 	header: Type.Object({
-		background: Color,
+		background: Type.Ref(Color),
+		borderWidth: Type.Ref(LineWidth),
+		borderColor: Type.Ref(Color),
+		boxShadow: Type.Ref(BoxShadow),
 		headline: Type.Object({
-			foreground: Color,
-			fontFamily: FontFamily,
+			foreground: Type.Ref(Color),
+			fontFamily: Type.Ref(FamilyName),
 		}),
 		title: Type.Object({
-			foreground: Color,
-			fontFamily: FontFamily,
+			foreground: Type.Ref(Color),
+			fontFamily: Type.Ref(FamilyName),
 		}),
 	}),
 
 	form: Type.Object({
 		field: Type.Object({
 			label: Type.Object({
-				foreground: Color,
-				fontFamily: FontFamily,
+				foreground: Type.Ref(Color),
+				fontFamily: Type.Ref(FamilyName),
 			}),
 			input: Type.Object({
-				background: Color,
-				foreground: Color,
-				foregroundSubdued: Color,
+				background: Type.Ref(Color),
+				foreground: Type.Ref(Color),
+				foregroundSubdued: Type.Ref(Color),
+
+				borderColor: Type.Ref(Color),
+				borderColorHover: Type.Ref(Color),
+				borderColorFocus: Type.Ref(Color),
+
+				boxShadow: Type.Ref(BoxShadow),
+				boxShadowHover: Type.Ref(BoxShadow),
+				boxShadowFocus: Type.Ref(BoxShadow),
 			}),
 		}),
 	}),
 
 	sidebar: Type.Object({
-		background: Color,
-		foreground: Color,
-		fontFamily: FontFamily,
+		background: Type.Ref(Color),
+		foreground: Type.Ref(Color),
+		fontFamily: Type.Ref(FamilyName),
+		borderWidth: Type.Ref(LineWidth),
+		borderColor: Type.Ref(Color),
 
 		section: Type.Object({
 			toggle: Type.Object({
 				icon: Type.Object({
-					foreground: Color,
-					foregroundHover: Color,
-					foregroundActive: Color,
+					foreground: Type.Ref(Color),
+					foregroundHover: Type.Ref(Color),
+					foregroundActive: Type.Ref(Color),
 				}),
 
-				foreground: Color,
-				foregroundHover: Color,
-				foregroundActive: Color,
+				foreground: Type.Ref(Color),
+				foregroundHover: Type.Ref(Color),
+				foregroundActive: Type.Ref(Color),
 
-				background: Color,
-				backgroundHover: Color,
-				backgroundActive: Color,
+				background: Type.Ref(Color),
+				backgroundHover: Type.Ref(Color),
+				backgroundActive: Type.Ref(Color),
 
-				fontFamily: FontFamily,
+				fontFamily: Type.Ref(FamilyName),
+
+				borderWidth: Type.Ref(LineWidth),
+				borderColor: Type.Ref(Color),
 			}),
 		}),
 	}),
@@ -146,6 +182,15 @@ export const ThemeSchema = Type.Object({
 	rules: Rules,
 });
 
-export const Definitions = { $defs: { [TypeId.Color]: Color, [TypeId.FontFamily]: FontFamily } };
+export const Definitions = {
+	$defs: {
+		Color,
+		FamilyName,
+		Length,
+		Percentage,
+		LineWidth,
+		BoxShadow,
+	},
+};
 
 export type Theme = Static<typeof ThemeSchema>;
diff --git a/packages/themes/src/themes/dark-directus.ts b/packages/themes/src/themes/dark-directus.ts
index ed838ea35c..36a47a6406 100644
--- a/packages/themes/src/themes/dark-directus.ts
+++ b/packages/themes/src/themes/dark-directus.ts
@@ -40,10 +40,17 @@ export const theme: Theme = {
 		fontFamilySerif: '"Merriweather", serif',
 		fontFamilyMonospace: '"Fira Mono", monospace',
 
+		borderRadius: '6px',
+		borderWidth: '2px',
+
 		navigation: {
 			background: '#21262e',
+			borderColor: 'transparent',
+			borderWidth: '0px',
 
 			project: {
+				borderColor: 'transparent',
+				borderWidth: '0px',
 				background: '#30363d',
 				foreground: 'var(--theme--foreground-accent)',
 				fontFamily: 'var(--theme--font-family-sans-serif)',
@@ -51,6 +58,9 @@ export const theme: Theme = {
 
 			modules: {
 				background: 'var(--theme--background)',
+				borderColor: 'transparent',
+				borderWidth: '0px',
+
 				button: {
 					foreground: 'var(--theme--foreground-subdued)',
 					foregroundHover: '#fff',
@@ -83,6 +93,9 @@ export const theme: Theme = {
 
 		header: {
 			background: 'var(--theme--background)',
+			borderColor: 'transparent',
+			borderWidth: '0px',
+			boxShadow: '0 4px 7px -4px rgb(var(--black) / 0.2)',
 			headline: {
 				foreground: 'var(--theme--foreground-subdued)',
 				fontFamily: 'var(--theme--font-family-sans-serif)',
@@ -103,6 +116,14 @@ export const theme: Theme = {
 					background: 'var(--theme--background)',
 					foreground: 'var(--theme--foreground)',
 					foregroundSubdued: 'var(--theme--foreground-subdued)',
+
+					borderColor: '#21262e',
+					borderColorHover: '#30363d',
+					borderColorFocus: 'var(--theme--primary)',
+
+					boxShadow: 'none',
+					boxShadowHover: 'none',
+					boxShadowFocus: '0 0 16px -8px var(--theme--primary)',
 				},
 			},
 		},
@@ -111,6 +132,8 @@ export const theme: Theme = {
 			background: '#21262e',
 			foreground: 'var(--theme--foreground-subdued)',
 			fontFamily: 'var(--theme--font-family-sans-serif)',
+			borderColor: 'transparent',
+			borderWidth: '0px',
 
 			section: {
 				toggle: {
@@ -129,6 +152,9 @@ export const theme: Theme = {
 					backgroundActive: 'var(--theme--sidebar--section--toggle--background)',
 
 					fontFamily: 'var(--theme--font-family-sans-serif)',
+
+					borderColor: 'transparent',
+					borderWidth: '0px',
 				},
 			},
 		},
diff --git a/packages/themes/src/themes/light-directus.ts b/packages/themes/src/themes/light-directus.ts
index 0952be9cb3..5b4d810ec6 100644
--- a/packages/themes/src/themes/light-directus.ts
+++ b/packages/themes/src/themes/light-directus.ts
@@ -40,10 +40,17 @@ export const theme: Theme = {
 		fontFamilySerif: '"Merriweather", serif',
 		fontFamilyMonospace: '"Fira Mono", monospace',
 
+		borderRadius: '6px',
+		borderWidth: '2px',
+
 		navigation: {
 			background: '#f0f4f9',
+			borderColor: 'transparent',
+			borderWidth: '0px',
 
 			project: {
+				borderColor: 'transparent',
+				borderWidth: '0px',
 				background: '#e4eaf1',
 				foreground: 'var(--theme--foreground-accent)',
 				fontFamily: 'var(--theme--font-family-sans-serif)',
@@ -51,6 +58,9 @@ export const theme: Theme = {
 
 			modules: {
 				background: '#18222f',
+				borderColor: 'transparent',
+				borderWidth: '0px',
+
 				button: {
 					foreground: '#8196b1',
 					foregroundHover: '#fff',
@@ -83,6 +93,9 @@ export const theme: Theme = {
 
 		header: {
 			background: 'var(--theme--background)',
+			borderColor: 'transparent',
+			borderWidth: '0px',
+			boxShadow: '0 4px 7px -4px rgb(0 0 0 / 0.2)',
 			headline: {
 				foreground: 'var(--theme--foreground-subdued)',
 				fontFamily: 'var(--theme--font-family-sans-serif)',
@@ -103,6 +116,14 @@ export const theme: Theme = {
 					background: 'var(--theme--background)',
 					foreground: 'var(--theme--foreground)',
 					foregroundSubdued: 'var(--theme--foreground-subdued)',
+
+					borderColor: '#f0f4f9',
+					borderColorHover: '#e4eaf1',
+					borderColorFocus: 'var(--theme--primary)',
+
+					boxShadow: 'none',
+					boxShadowHover: 'none',
+					boxShadowFocus: '0 0 16px -8px var(--theme--primary)',
 				},
 			},
 		},
@@ -111,6 +132,8 @@ export const theme: Theme = {
 			background: '#f0f4f9',
 			foreground: 'var(--theme--foreground-subdued)',
 			fontFamily: 'var(--theme--font-family-sans-serif)',
+			borderColor: 'transparent',
+			borderWidth: '0px',
 
 			section: {
 				toggle: {
@@ -129,6 +152,9 @@ export const theme: Theme = {
 					backgroundActive: 'var(--theme--sidebar--section--toggle--background)',
 
 					fontFamily: 'var(--theme--font-family-sans-serif)',
+
+					borderColor: 'transparent',
+					borderWidth: '0px',
 				},
 			},
 		},
diff --git a/packages/themes/src/use-fonts.ts b/packages/themes/src/use-fonts.ts
index 9b62fb2b52..4ca7132d4a 100644
--- a/packages/themes/src/use-fonts.ts
+++ b/packages/themes/src/use-fonts.ts
@@ -2,7 +2,7 @@ import { get } from 'lodash-es';
 import type { MaybeRef } from 'vue';
 import { computed, unref } from 'vue';
 import type { Theme } from './schema.js';
-import { ThemeSchema, TypeId } from './schema.js';
+import { ThemeSchema } from './schema.js';
 
 export const useFonts = (rules: MaybeRef<Theme>) => {
 	const paths: string[][] = [];
@@ -14,7 +14,7 @@ export const useFonts = (rules: MaybeRef<Theme>) => {
 					find(value.properties as Record<string, unknown>, [...path, key]);
 				}
 
-				if ('$ref' in value && value.$ref === TypeId.FontFamily) {
+				if ('$ref' in value && value.$ref === 'FamilyName') {
 					paths.push([...path, key]);
 				}
 			}