diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
index 9001d4fe8..ccdba0c4e 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
@@ -7,6 +7,7 @@
 	import PullVersionList from "./PullVersionList.svelte";
 	import { type Range } from "$lib/components/ui/RangeSelector.svelte";
 	import type { PullSubmission } from "$lib/api";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		versions: PullSubmission[];
@@ -33,7 +34,7 @@
 	<div class="flex gap-2">
 		{#if actions}
 			{@render actions()}
-			<div role="separator" class="stretch border-r border-border-default"></div>
+			<Separator orientation="vertical" />
 		{/if}
 		<PullVersionList {versions} range={versionRange} oncommit={oncommitVersions} />
 	</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
index 5ffb5562e..e102bec3b 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
@@ -5,6 +5,7 @@
 	import type { CommitSummary } from "../types";
 	import PullCommitRow from "./PullCommitRow.svelte";
 	import Link from "$lib/components/ui/Link.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		commits: CommitSummary[];
@@ -72,7 +73,7 @@
 
 <div style={palette}>
 	{@render selectAllRow()}
-	<div class="my-2.5 border-b border-border-default"></div>
+	<Separator class="my-2.5" />
 	{#each commits as commit, i (i)}
 		{@const isSelected = selected === i}
 		{@const focusable = commit.changeId !== undefined}
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index 9dee87f26..942a3089a 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -40,6 +40,7 @@
 	import type { RepoInfo } from "$lib/components/repo/types";
 	import type { MarkupContext } from "$lib/markup";
 	import { formatCount } from "$lib/format";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	/** everything the route's load derived, passed through whole */
 	interface Props {
@@ -514,7 +515,7 @@
 										{commit.shortHash}
 									</code>
 								</span>
-								<span class="-my-2 w-px self-stretch bg-border-default"></span>
+								<Separator orientation="vertical" class="-my-2" />
 								<span class="flex shrink-0 items-center gap-1">
 									<button
 										type="button"
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.svelte b/web/src/lib/components/repo/pulls/PullVersionList.svelte
index ddf7f8975..b30843287 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.svelte
@@ -13,6 +13,7 @@
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import type { PullSubmission } from "$lib/api";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		versions: PullSubmission[];
@@ -71,7 +72,7 @@
 			bind:range={() => selected, (next) => (pending = next)}
 		/>
 		<div class="flex h-4 items-center">
-			<div class="w-full border-t border-border-default"></div>
+			<Separator />
 		</div>
 		<div class="flex gap-2">
 			<Button icon={RotateCcw} onclick={reset}>Reset</Button>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index afcf7d085..d04f3a2a8 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -15,6 +15,7 @@
 	import type { MarkupContext } from "$lib/markup";
 	import type { Snippet } from "svelte";
 	import Reactions from "$lib/components/reaction/Reactions.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		// ticketView
@@ -91,9 +92,10 @@
 						>
 							Delete
 						</Button>
+						<Separator orientation="vertical" />
 					{/if}
 					{#if extraActions}
-						<div class="flex items-center gap-2 border-l border-border-default pl-2">
+						<div class="flex items-center gap-2">
 							{@render extraActions()}
 						</div>
 					{/if}
diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
index 5789f99dd..43b35adc3 100644
--- a/web/src/lib/components/settings/SettingsBlock.svelte
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		/** Figma uses 16px on General's label blocks and 14px on Access/Pipelines */
@@ -55,7 +56,7 @@
 		</div>
 	{/if}
 	{#if separator}
-		<hr class="w-full border-0 border-t border-border-default" />
+		<Separator />
 	{/if}
 	{#if children}
 		{@render children()}
diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index de642ad56..44490a9ba 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -9,6 +9,7 @@
 	import { resolve } from "$app/paths";
 	import Select from "$lib/components/ui/Select.svelte";
 	import Tabs from "$lib/components/ui/Tabs.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		items: SettingsNavItem[];
@@ -33,7 +34,7 @@
 <div class="flex w-full flex-col gap-4 md:hidden">
 	<!-- the active tab lives in the url, so navigation is what updates it: no two way binding -->
 	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
-	<hr class="w-full border-0 border-t border-border-default" />
+	<Separator />
 </div>
 
 <Tabs
diff --git a/web/src/lib/components/settings/SettingsToolbar.svelte b/web/src/lib/components/settings/SettingsToolbar.svelte
index 27eeab516..4fbab22f1 100644
--- a/web/src/lib/components/settings/SettingsToolbar.svelte
+++ b/web/src/lib/components/settings/SettingsToolbar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		start?: Snippet;
@@ -20,5 +21,5 @@
 	{/if}
 </div>
 {#if separator}
-	<hr class="w-full border-0 border-t border-border-default" />
+	<Separator />
 {/if}
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index c53a97f2d..04a59c176 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -17,6 +17,7 @@
 	import Key from "$icon/key";
 	import Pause from "$icon/pause";
 	import Trash from "$icon/trash-2";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	const auth = getAuth();
 	const user = $derived(auth.currentUser);
@@ -125,7 +126,7 @@
 		</SettingsRow>
 	</SettingsSection>
 
-	<hr class="w-full border-0 border-t border-border-default" />
+	<Separator />
 
 	<SettingsSection title="Danger zone">
 		<SettingsRow title="Password">
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
index 2c317e8f7..a00147900 100644
--- a/web/src/routes/[handle]/[repo]/settings/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -18,6 +18,7 @@
 	import X from "$icon/x";
 	import Pencil from "$icon/pencil";
 	import Trash from "$icon/trash-2";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	let { data } = $props();
 
@@ -197,7 +198,7 @@
 			</div>
 		</SettingsSection>
 
-		<hr class="w-full border-0 border-t border-border-default" />
+		<Separator />
 
 		<SettingsSection title="Danger zone" headingGap="4">
 			<SettingsRow title="Rename">
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index 9fc6bca2d..7eff74ed9 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -17,6 +17,7 @@
 	import Check from "$icon/check";
 	import ExternalLink from "$icon/external-link";
 	import Settings2 from "$icon/settings-2";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	let { data } = $props();
 
@@ -144,7 +145,7 @@
 		{/if}
 	</SettingsList>
 
-	<hr class="w-full border-0 border-t border-border-default" />
+	<Separator />
 
 	<SettingsSection title="Recent deploys" headingGap="4" framed={deploys.length > 0}>
 		{#if deploys.length === 0}