diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
index 24c527a8..dd07c791 100644
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -4,7 +4,7 @@
 	import CircleX from "$icon/circle-x";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import IssueSearch from "./IssueSearch.svelte";
 
 	interface Props {
@@ -33,7 +33,7 @@
 		<!-- TODO: wire up state filter navigation -->
 		<Button
 			href={resolve(`${base}?state=open` as "/")}
-			variant={state === "open" ? "default" : "ghost"}
+			{...segmentProps(state === "open")}
 			size="sm"
 			icon={CircleDot}
 		>
@@ -42,7 +42,7 @@
 		</Button>
 		<Button
 			href={resolve(`${base}?state=closed` as "/")}
-			variant={state === "closed" ? "default" : "ghost"}
+			{...segmentProps(state === "closed")}
 			size="sm"
 			icon={CircleX}
 		>
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index e297808f..f2142e3a 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Button from "./Button.svelte";
-	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
 
 	const { Story } = defineMeta({
 		title: "UI/ButtonGroup",
@@ -47,3 +47,15 @@
 		</ButtonGroup>
 	</div>
 </Story>
+
+<!--
+	The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
+	the selected segment gets the `default` variant + insetShadow, unselected segments are
+	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
+-->
+<Story name="Tab Switcher">
+	<ButtonGroup>
+		<Button {...segmentProps(true)}>Open</Button>
+		<Button {...segmentProps(false)}>Closed</Button>
+	</ButtonGroup>
+</Story>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 8dd4d7db..817983ff 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -1,14 +1,20 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
+	import type { ButtonVariants } from "./Button.svelte";
 
 	export const buttonGroup = tv({
 		base: "inline-flex items-center",
 		variants: {
+			// joined groups are the segmented control from Figma: the group draws the outer
+			// border and the recessed surface, and each segment's own 1px border is pulled
+			// onto it (-m-px) so an unselected segment shows the group's surface while a
+			// selected one covers it and reads as a raised card.
 			spaced: {
 				true: "gap-2",
 				false: [
-					"gap-0",
-					"*:relative",
+					"gap-0 rounded border border-border-default bg-background-subtle",
+					"*:relative *:-my-px",
+					"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
 					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
 					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
 					"[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
@@ -21,6 +27,25 @@
 	});
 
 	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+
+	/**
+	 * Recipe for using ButtonGroup as a tab/segment switcher (e.g. Open/Closed issue filters,
+	 * Write/Preview editor tabs). Per Figma, the selected segment reads as a raised, lighter
+	 * surface (`default` + its inset shadow) while unselected segments are flat `ghost`
+	 * buttons — never the plain `default` variant, which reads as the *hovered* state of an
+	 * unselected segment. Figma also gives an unselected segment the same foreground as a
+	 * selected one, where `ghost` on its own is muted, so the recipe overrides the colour
+	 * here rather than changing `ghost` everywhere it's used.
+	 */
+	export function segmentProps(selected: boolean): {
+		variant: ButtonVariants["variant"];
+		insetShadow: boolean;
+		class?: string;
+	} {
+		return selected
+			? { variant: "default", insetShadow: true }
+			: { variant: "ghost", insetShadow: false, class: "text-foreground-default" };
+	}
 </script>
 
 <script lang="ts">
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 8b667208..75bafa25 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -3,7 +3,7 @@
 	import Eye from "$icon/eye";
 	import Pencil from "$icon/pencil";
 	import Button from "./Button.svelte";
-	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
 	import Textarea from "./Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 
@@ -86,7 +86,7 @@
 			type="button"
 			size="sm"
 			icon={Pencil}
-			variant={tab === "write" ? "default" : "ghost"}
+			{...segmentProps(tab === "write")}
 			onclick={() => (tab = "write")}
 		>
 			Write
@@ -95,7 +95,7 @@
 			type="button"
 			size="sm"
 			icon={Eye}
-			variant={tab === "preview" ? "default" : "ghost"}
+			{...segmentProps(tab === "preview")}
 			onclick={() => (tab = "preview")}
 		>
 			Preview