diff --git a/frontend/src/lib/components/DBManagerDrawer.svelte b/frontend/src/lib/components/DBManagerDrawer.svelte
index 4cac116f06..13bb2b3d90 100644
--- a/frontend/src/lib/components/DBManagerDrawer.svelte
+++ b/frontend/src/lib/components/DBManagerDrawer.svelte
@@ -323,7 +323,8 @@
 			<Button
 				disabled={!importSource}
 				loading={importLoading}
-				color="red"
+				variant="default"
+				destructive
 				on:click={handleImportDatabase}
 			>
 				Import {importBehavior === 'schema_and_data' ? 'schemas and data' : 'schemas'} into current database
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 2081e12e29..2426e7e04f 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -191,7 +191,9 @@
 				((typeof dropdownItems === 'function' && dropdownItems().length > 0) ||
 					dropdownItems.length > 0)
 			) {
-				style = style.replace('border border-border-light', '')
+				// The border colour differs between the plain and destructive styles, so match
+				// whichever resting border the variant declared rather than one literal class.
+				style = style.replace(/\bborder border-[^\s]+/, '')
 			}
 			return style
 		}
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index 8126ef8667..b9653e83df 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -194,9 +194,9 @@ export namespace ButtonType {
 		accent:
 			'bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
 		default:
-			'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+			'border border-red-600/30 hover:border-red-600/60 dark:border-red-400/30 dark:hover:border-red-400/60 bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
 		subtle:
-			'bg-transparent hover:bg-red-500 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
+			'bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
 	}
 
 	export const VariantSpacingClasses: Record<ButtonType.Size, string> = {
diff --git a/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte b/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
index bb908a433c..2a09bb1af0 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte
@@ -481,7 +481,7 @@
 								variant="subtle"
 								size="xs"
 								iconOnly
-								color="red"
+								destructive
 								startIcon={{ icon: Trash2 }}
 								title="Delete migration"
 								disabled={busy}
@@ -566,7 +566,7 @@
 			</Button>
 			<Button
 				variant="default"
-				color="red"
+				destructive
 				size="sm"
 				disabled={busy}
 				on:click={() => {