diff --git a/apps/web/src/page/dashboards/view/picker.ts b/apps/web/src/page/dashboards/view/picker.ts
index 8675cc2447..e7d3170379 100644
--- a/apps/web/src/page/dashboards/view/picker.ts
+++ b/apps/web/src/page/dashboards/view/picker.ts
@@ -34,7 +34,7 @@ const pickerCard = (h: H, title: string, description: string, onClick: Message,
 			h.Type("button"),
 			h.OnClick(onClick),
 			h.Class(
-				"group ring-1 ring-border hover:ring-border-active bg-background p-4 text-left transition-all flex flex-col gap-3 rounded-md",
+				"group ring-1 ring-border hover:ring-foreground/30 bg-background p-4 text-left transition-all flex flex-col gap-3 rounded-md",
 			),
 		],
 		[
@@ -43,7 +43,7 @@ const pickerCard = (h: H, title: string, description: string, onClick: Message,
 				[h.Class("flex flex-col gap-0.5")],
 				[
 					h.div([h.Class("text-xs font-medium")], [title]),
-					...(description === "" ? [] : [h.div([h.Class("text-2xs text-dim")], [description])]),
+					...(description === "" ? [] : [h.div([h.Class("text-2xs text-muted-foreground")], [description])]),
 				],
 			),
 		],
@@ -54,7 +54,7 @@ const pickerSection = (h: H, title: string, showHeading: boolean, cards: Readonl
 	h.div(
 		[h.Class("flex flex-col gap-3")],
 		[
-			...(showHeading ? [eyebrow(h, { as: "h3", className: "text-dim" }, [title])] : []),
+			...(showHeading ? [eyebrow(h, { as: "h3" }, [title])] : []),
 			h.div([h.Class("grid grid-cols-3 gap-3")], cards),
 		],
 	)
diff --git a/apps/web/src/page/overview/view-health.ts b/apps/web/src/page/overview/view-health.ts
index c6488bc25a..e0b7dbf281 100644
--- a/apps/web/src/page/overview/view-health.ts
+++ b/apps/web/src/page/overview/view-health.ts
@@ -28,7 +28,6 @@ import {
 } from "./derive"
 import type { HealthSnapshot, Incident, Model } from "./model"
 import { alertFiringHero } from "./view-hero"
-import { OVERVIEW_RAIL_CLASS } from "./view-usage"
 import { statRail, statRailItem, statRailLoading } from "../kit/stat-rail"
 
 // The service health overview: the alerts banner and
@@ -119,7 +118,7 @@ export const healthOverview = <M>(h: HtmlBuilder<M>, { model, slice, nowMs }: He
 		onEmpty: () =>
 			section(h, "mb-4 space-y-3", false, [
 				...banner,
-				statRailLoading(h, 4, undefined, OVERVIEW_RAIL_CLASS),
+				statRailLoading(h, 4),
 			]),
 		// An empty section keeps no margin, or the page strip's gap above the usage rail doubles.
 		onFailure: () => section(h, banner.length > 0 ? "mb-4 space-y-3" : "space-y-3", false, banner),
@@ -136,7 +135,7 @@ export const healthOverview = <M>(h: HtmlBuilder<M>, { model, slice, nowMs }: He
 				counts[health] > 0 ? active : "neutral"
 			return section(h, "mb-4 space-y-3", AsyncData.isRefreshing(data), [
 				...banner,
-				statRail(h, { className: OVERVIEW_RAIL_CLASS }, [
+				statRail(h, {}, [
 					statRailItem(h, {
 						eyebrow: "Services",
 						value: String(snapshot.length),
diff --git a/apps/web/src/page/overview/view-metrics.ts b/apps/web/src/page/overview/view-metrics.ts
index f22ff76ad8..8558088cf2 100644
--- a/apps/web/src/page/overview/view-metrics.ts
+++ b/apps/web/src/page/overview/view-metrics.ts
@@ -314,7 +314,7 @@ const cardContent = (
 			// one-line caption in the strip's failure class, centred in the plot area. No axis, no data.
 			if (pageFailureKeys.split(FAILURE_KEY_SEPARATOR).includes(failureKey(cardFailure)))
 				return h.div(
-					[h.Class("flex h-full flex-col px-6 pb-6")],
+					[h.Class("flex h-full flex-col px-4 pb-4")],
 					[
 						h.span(
 							[
diff --git a/apps/web/src/page/overview/view-usage.ts b/apps/web/src/page/overview/view-usage.ts
index c42ba27274..4a0f9253e2 100644
--- a/apps/web/src/page/overview/view-usage.ts
+++ b/apps/web/src/page/overview/view-usage.ts
@@ -9,9 +9,8 @@ import { statRail, statRailItem, statRailLoading } from "../kit/stat-rail"
 
 // The service usage cards.
 
-/** Overview rails share the chart cards' corner radius and their 24px inner inset. */
-export const OVERVIEW_RAIL_CLASS = "rounded-2xl"
-const OVERVIEW_TILE_CLASS = "px-6"
+/** Overview tiles share the chart cards' 16px inner inset. */
+const OVERVIEW_TILE_CLASS = "px-4"
 
 const CARDS: ReadonlyArray<{ title: string; key: keyof UsageTotals; format: (value: number) => string }> = [
 	{ title: "Total Logs", key: "logs", format: formatNumber },
@@ -27,11 +26,11 @@ export const usageCards = <M>(
 	isExplained: (failure: LoadFailure) => boolean,
 ): Html =>
 	AsyncData.matchData(model.usage.data, {
-		onEmpty: () => statRailLoading(h, CARDS.length, 3, OVERVIEW_RAIL_CLASS),
+		onEmpty: () => statRailLoading(h, CARDS.length, 3),
 		onFailure: (failure) =>
 			statRail(
 				h,
-				{ columns: 3, className: OVERVIEW_RAIL_CLASS },
+				{ columns: 3 },
 				CARDS.map((card) =>
 					statRailItem(h, {
 						eyebrow: card.title,
@@ -49,7 +48,7 @@ export const usageCards = <M>(
 		onData: ({ totals, previous }) =>
 			statRail(
 				h,
-				{ columns: 3, className: OVERVIEW_RAIL_CLASS },
+				{ columns: 3 },
 				CARDS.map((card) =>
 					statRailItem(h, {
 						eyebrow: card.title,
diff --git a/apps/web/src/service-map/map/node-card.ts b/apps/web/src/service-map/map/node-card.ts
index 51e926cc75..1e973c6f02 100644
--- a/apps/web/src/service-map/map/node-card.ts
+++ b/apps/web/src/service-map/map/node-card.ts
@@ -58,7 +58,7 @@ export const HEALTH_TONE = { crit: "crit", warn: "warn", neutral: "ok" } satisfi
 const SELECTED_BORDER_CLASS = {
 	crit: "border-severity-error ring-[3px] ring-severity-error/15",
 	warn: "border-severity-warn ring-[3px] ring-severity-warn/15",
-	neutral: "border-border-active ring-[3px] ring-foreground/15",
+	neutral: "border-foreground/40 ring-[3px] ring-foreground/15",
 } satisfies Record<ErrorRateLevel, string>
 
 export const selectedBorderClass = (errorRate: number): string =>
diff --git a/apps/web/src/service-map/map/nodes.ts b/apps/web/src/service-map/map/nodes.ts
index 42539f98cd..c2c727f12e 100644
--- a/apps/web/src/service-map/map/nodes.ts
+++ b/apps/web/src/service-map/map/nodes.ts
@@ -103,7 +103,7 @@ const serviceNode = <M>(h: HtmlBuilder<M>, id: string, data: ServiceNodeData): R
 						"flex w-[220px] cursor-pointer overflow-hidden rounded-r-lg border bg-card transition-[border-color,box-shadow] duration-150",
 						selected
 							? selectedBorderClass(errorRate)
-							: "border-border hover:border-border-active",
+							: "border-border hover:border-foreground/30",
 					),
 				),
 			],
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index be8cfc469c..8640d8e186 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -711,13 +711,6 @@ width = its duration */
 	}
 }
 
-/* Trace timeline bar hover: CSS-only, no re-render */
-.trace-timeline-bar:hover {
-	background-color: var(--hover-bg) !important;
-	box-shadow: inset 0 0 0 1px oklch(0.5 0.05 0 / 0.15);
-	z-index: 5;
-}
-
 /* Infra honeycomb — flat severity tiles.
    Maple is a flat system: no shadows, no gradients, no glow. Each cell points
    `--tone` at a severity token and fills flat. Per the design system, inactive
diff --git a/apps/web/src/ui/card.ts b/apps/web/src/ui/card.ts
index f297baf8cb..e492b56c99 100644
--- a/apps/web/src/ui/card.ts
+++ b/apps/web/src/ui/card.ts
@@ -9,7 +9,7 @@ import {
 } from "@maple/ui/styles/ui/card"
 import type { Attribute, Html, HtmlBuilder } from "foldkit/html"
 
-// Port of packages/ui/src/components/ui/card.tsx: the raised rounded-2xl surface and its parts.
+// The Card surface (styles in packages/ui/src/components/ui/card.styles.ts): rounded-md, and its parts.
 
 type Children = ReadonlyArray<Html | string>
 
diff --git a/packages/ui/src/components/ui/card.styles.ts b/packages/ui/src/components/ui/card.styles.ts
index 9bf20aaae4..7054c9cd30 100644
--- a/packages/ui/src/components/ui/card.styles.ts
+++ b/packages/ui/src/components/ui/card.styles.ts
@@ -1,8 +1,8 @@
 export const cardStyles =
-	"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
+	"relative flex flex-col rounded-md border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
 
 export const cardHeaderStyles =
-	"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"
+	"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-4 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-3 has-data-[slot=card-action]:grid-cols-[1fr_auto]"
 
 export const cardTitleStyles = "font-semibold text-lg leading-none"
 
@@ -11,7 +11,7 @@ export const cardDescriptionStyles = "text-muted-foreground text-sm"
 export const cardActionStyles = "col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end"
 
 export const cardPanelStyles =
-	"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0"
+	"flex-1 p-4 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0"
 
 export const cardFooterStyles =
-	"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4"
+	"flex items-center p-4 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-3"
diff --git a/packages/ui/src/components/ui/combobox.styles.ts b/packages/ui/src/components/ui/combobox.styles.ts
index c2e03f552e..c9648dd6e0 100644
--- a/packages/ui/src/components/ui/combobox.styles.ts
+++ b/packages/ui/src/components/ui/combobox.styles.ts
@@ -9,7 +9,7 @@ export const comboboxInputGroupStyles =
 	"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64"
 
 export const comboboxStartAddonStyles =
-	"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5"
+	"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:-mx-0.5"
 
 export const comboboxInputStartAddonStyles =
 	"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]"
@@ -23,10 +23,10 @@ export const comboboxInputDefaultStyles =
 export const comboboxInputControlStyles = "has-disabled:opacity-100"
 
 export const comboboxTriggerStyles =
-	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxClearStyles =
-	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxTriggerSmStyles = "end-0"
 
@@ -45,7 +45,7 @@ export const comboboxPopupStyles =
 	"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
 
 export const comboboxItemStyles =
-	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const comboboxItemIndicatorStyles = "col-start-1"
 
@@ -68,7 +68,7 @@ export const comboboxChipsStyles =
 	"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]"
 
 export const comboboxChipsStartAddonStyles =
-	"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
+	"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
 
 // A translucent foreground tint rather than `bg-accent`: in this theme
 // --accent, --muted and --secondary are all the same value as the
diff --git a/packages/ui/src/components/ui/select.styles.ts b/packages/ui/src/components/ui/select.styles.ts
index 647fb97f3d..88dcb498da 100644
--- a/packages/ui/src/components/ui/select.styles.ts
+++ b/packages/ui/src/components/ui/select.styles.ts
@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority"
 
 export const selectTriggerVariants = cva(
-	"relative inline-flex min-h-9 min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
+	"relative inline-flex min-h-9 min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
 	{
 		defaultVariants: {
 			size: "default",
@@ -16,7 +16,7 @@ export const selectTriggerVariants = cva(
 	},
 )
 
-export const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4"
+export const selectTriggerIconClassName = "-me-1 size-4 opacity-80 sm:size-3.5"
 
 export const selectButtonValueStyles = "flex-1 truncate in-data-placeholder:text-muted-foreground/72"
 
@@ -44,11 +44,11 @@ export const selectScrollDownArrowStyles =
 	"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover"
 
 export const selectItemStyles =
-	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+	"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 
 export const selectItemIndicatorStyles = "col-start-1"
 
-export const selectItemIndicatorIconStyles = "size-4"
+export const selectItemIndicatorIconStyles = "size-4 sm:size-3.5"
 
 export const selectItemTextStyles = "col-start-2 min-w-0"
 
diff --git a/packages/ui/src/components/ui/tabs.styles.ts b/packages/ui/src/components/ui/tabs.styles.ts
index 80bc4dc145..05a1548445 100644
--- a/packages/ui/src/components/ui/tabs.styles.ts
+++ b/packages/ui/src/components/ui/tabs.styles.ts
@@ -19,6 +19,6 @@ export const tabsIndicatorUnderlineStyles =
 export const tabsIndicatorDefaultStyles = "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input"
 
 export const tabsTabStyles =
-	"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0"
+	"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0"
 
 export const tabsPanelStyles = "flex-1 outline-none"
diff --git a/packages/ui/src/lib/colors.ts b/packages/ui/src/lib/colors.ts
index f07d5744a7..9e02daa30b 100644
--- a/packages/ui/src/lib/colors.ts
+++ b/packages/ui/src/lib/colors.ts
@@ -220,37 +220,40 @@ export function calculateSelfTime(
 }
 
 /** Last-resort colour for a token that is neither on the document nor in {@link TOKEN_FALLBACK}. */
-export const DEFAULT_TOKEN_FALLBACK = "#6366f1"
+export const DEFAULT_TOKEN_FALLBACK = "#e8872a"
 
 /**
  * The one hex fallback per design token, used where a token cannot be read off
- * the document (SSR, tests, a canvas painted before styles load). Callers name
+ * the document (SSR, tests, a canvas painted before styles load), from the dark theme. Callers name
  * the token only; nothing else should carry its own `["--token", "#hex"]` pair.
  */
 export const TOKEN_FALLBACK: Readonly<Record<string, string>> = {
-	"--background": "#0c0a09",
-	"--foreground": "#fafafa",
-	"--border": "#3f3f46",
-	"--muted-foreground": "#a1a1aa",
-	"--primary": "#6366f1",
-	"--destructive": "#ef4444",
-	"--chart-1": "#6366f1",
-	"--chart-2": "#22d3ee",
-	"--chart-3": "#f59e0b",
-	"--chart-4": "#fbbf24",
-	"--chart-5": "#f472b6",
-	"--chart-p99": "#e0484a",
-	"--chart-p95": "#e0a23a",
-	"--chart-p50": "#4f8ef7",
-	"--chart-error": "#e5484d",
-	"--chart-throughput": "#8b7cf6",
-	"--chart-apdex": "#3fb27f",
-	"--severity-trace": "#71717a",
-	"--severity-debug": "#3b82f6",
-	"--severity-info": "#10b981",
-	"--severity-warn": "#f59e0b",
-	"--severity-error": "#ef4444",
-	"--severity-fatal": "#b91c1c",
+	"--background": "#1a1714",
+	"--foreground": "#e8e0d6",
+	"--border": "#2a2520",
+	"--muted-foreground": "#9b9084",
+	"--primary": "#e8872a",
+	"--destructive": "#e85d4b",
+	"--chart-1": "#e8872a",
+	"--chart-2": "#4a9eff",
+	"--chart-3": "#49a866",
+	"--chart-4": "#00aa9a",
+	"--chart-5": "#b589d6",
+	"--chart-p99": "#e85d4b",
+	"--chart-p95": "#e8872a",
+	"--chart-p50": "#4a9eff",
+	"--chart-error": "#ef2e43",
+	"--chart-throughput": "#9281e1",
+	"--chart-apdex": "#49a866",
+	"--severity-trace": "#8a7f72",
+	"--severity-debug": "#4a9eff",
+	"--severity-info": "#49a866",
+	"--severity-warn": "#ebb432",
+	"--severity-error": "#e85d4b",
+	"--severity-fatal": "#c43d2e",
+	"--info": "#4a9eff",
+	"--success": "#49a866",
+	"--warning": "#ebb432",
 } satisfies Record<string, string>
 
 /**
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index ca96a480b6..e5f6750924 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -158,11 +158,12 @@
 	--heatmap-cividis-4: oklch(0.43 0.06 258);
 
 	--destructive-foreground: var(--color-red-700);
-	--info: var(--color-blue-500);
+	/* Status aliases: one palette, the logs severity scale. */
+	--info: var(--severity-debug);
 	--info-foreground: var(--color-blue-700);
-	--success: var(--color-emerald-500);
+	--success: var(--severity-info);
 	--success-foreground: var(--color-emerald-700);
-	--warning: var(--color-amber-500);
+	--warning: var(--severity-warn);
 	--warning-foreground: var(--color-amber-700);
 }
 
@@ -293,11 +294,12 @@
 	--heatmap-cividis-4: oklch(0.85 0.13 95);
 
 	--destructive-foreground: var(--color-red-400);
-	--info: var(--color-blue-500);
+	/* Status aliases: one palette, the logs severity scale. */
+	--info: var(--severity-debug);
 	--info-foreground: var(--color-blue-400);
-	--success: var(--color-emerald-500);
+	--success: var(--severity-info);
 	--success-foreground: var(--color-emerald-400);
-	--warning: var(--color-amber-500);
+	--warning: var(--severity-warn);
 	--warning-foreground: var(--color-amber-400);
 }