style(web): name the opacity ladders, one width scale, severity status colours

apps/web/src/charts/bucket-tooltip.ts

@@ -16,7 +16,7 @@ export const bucketTooltipBody = <Message>(
 		[h.Class("grid min-w-[9rem] max-w-[22rem] items-start gap-1.5"), portal],
 		[
 			h.div(
-				[h.Class("border-border/60 border-b pb-1 font-medium text-muted-foreground tracking-tight")],
+				[h.Class("border-border-subtle border-b pb-1 font-medium text-muted-foreground tracking-tight")],
 				[tooltip.heading],
 			),
 			h.div(
@@ -74,7 +74,7 @@ export const bucketTooltipBody = <Message>(
 						h.div(
 							[
 								h.Class(
-									"flex items-center justify-between gap-3 border-border/60 border-t pt-1.5 leading-none",
+									"flex items-center justify-between gap-3 border-border-subtle border-t pt-1.5 leading-none",
 								),
 							],
 							[

apps/web/src/charts/funnel-chart.ts

@@ -31,7 +31,7 @@ const GROUP_BAR_H = 8
 export const PERCENT_FLOOR = { floor: 0.0005 }
 const LEGEND_H = 18
 
-const sep = (h: H, glyph: string): Html => h.span([h.Class("px-1 text-muted-foreground/50")], [glyph])
+const sep = (h: H, glyph: string): Html => h.span([h.Class("px-1 text-foreground-faint")], [glyph])
 
 const swatch = (h: H, className: string, color: string): Html =>
 	h.span([h.Class(className), h.Style({ "background-color": color })])
@@ -79,13 +79,13 @@ const stageNumbers = (h: H, stage: Stage, hoverGroup: string | null, flags: Flag
 	if (hovered !== undefined)
 		return [
 			swatch(h, "mr-1 inline-block size-2 rounded-xs align-middle", hovered.color),
-			h.span([h.Class("text-foreground/90")], [fmtValue(hovered.value, flags.unit)]),
+			h.span([h.Class("text-foreground-soft")], [fmtValue(hovered.value, flags.unit)]),
 			...(flags.showShareOfFirst
 				? [sep(h, "·"), h.span([], [formatPercent(hovered.pctOfFirst, PERCENT_FLOOR)])]
 				: []),
 		]
 	return [
-		h.span([h.Class("text-foreground/90")], [fmtValue(stage.value, flags.unit)]),
+		h.span([h.Class("text-foreground-soft")], [fmtValue(stage.value, flags.unit)]),
 		...(flags.showShareOfFirst
 			? [sep(h, "·"), h.span([], [formatPercent(stage.pctOfFirst, PERCENT_FLOOR)])]
 			: []),
@@ -176,7 +176,7 @@ export const view = Submodel.defineView<Model, Message, FunnelChartInputs>((mode
 										h.Class(
 											cn(
 												"truncate",
-												stage.unnamed ? "italic text-muted-foreground" : "text-foreground/90",
+												stage.unnamed ? "italic text-muted-foreground" : "text-foreground-soft",
 											),
 										),
 										h.Title(stage.name),

apps/web/src/charts/funnel-dropoff-chart.ts

@@ -67,7 +67,7 @@ const leaversBlock = (h: H, hovered: Step): ReadonlyArray<Html> =>
 											h.Class(
 												cn(
 													"min-w-0 flex-1 truncate",
-													entry.ended ? "text-muted-foreground" : "text-foreground/90",
+													entry.ended ? "text-muted-foreground" : "text-foreground-soft",
 												),
 											),
 										],
@@ -83,7 +83,7 @@ const leaversBlock = (h: H, hovered: Step): ReadonlyArray<Html> =>
 										h.Class(
 											cn(
 												"absolute inset-y-0 left-0 rounded-sm",
-												entry.ended ? "bg-foreground/25" : "bg-[var(--chart-2)]",
+												entry.ended ? "bg-foreground/25" : "bg-chart-2",
 											),
 										),
 										h.Style({ width: `${entry.share * 100}%` }),
@@ -127,7 +127,7 @@ const tooltip = (h: H, hovered: Step, prev: Step, left: number, unit: string | u
 				"converted",
 				fmtValue(hovered.value, unit),
 				formatPercent(hovered.ofPrev ?? 0),
-				"text-success-foreground",
+				"text-severity-info",
 			),
 			tipRow(
 				h,
@@ -204,7 +204,7 @@ const plainBars = (h: H, step: Step, prev: Step | undefined): ReadonlyArray<Html
 				]
 			: []),
 		h.div([
-			h.Class("absolute inset-x-0 bottom-0 rounded-sm bg-[var(--chart-2)]"),
+			h.Class("absolute inset-x-0 bottom-0 rounded-sm bg-chart-2"),
 			h.Style({
 				height: `${Math.max(step.ofFirst * 100, step.value > 0 ? 1.5 : 0)}%`,
 				transition: "height 220ms ease",
@@ -219,7 +219,7 @@ const pill = (h: H, ctx: ColumnContext, step: Step, prev: Step, isLast: boolean)
 	return h.span(
 		[
 			h.Class(
-				"absolute bottom-1.5 left-1.5 flex items-center gap-2 rounded-md bg-card/95 px-1.5 py-1 text-2xs leading-none tabular-nums whitespace-nowrap shadow-xs ring-1 ring-border/60",
+				"absolute bottom-1.5 left-1.5 flex items-center gap-2 rounded-md bg-card/95 px-1.5 py-1 text-2xs leading-none tabular-nums whitespace-nowrap shadow-xs ring-1 ring-border-subtle",
 			),
 			h.DataAttribute("slot", "funnel-dropoff-pill"),
 		],
@@ -237,7 +237,7 @@ const pill = (h: H, ctx: ColumnContext, step: Step, prev: Step, isLast: boolean)
 			...(ctx.pillLoss && lostShare > 0
 				? [
 						h.span(
-							[h.Class("flex items-center gap-1 text-foreground/80")],
+							[h.Class("flex items-center gap-1 text-foreground-soft")],
 							[icon(h, "ArrowDownIcon", { size: 12, className: TONE_TEXT.crit }), formatPercent(lostShare)],
 						),
 					]
@@ -273,7 +273,7 @@ const column = (h: H, ctx: ColumnContext, step: Step, index: number): Html => {
 							h.Class(
 								cn(
 									"truncate text-2xs font-medium",
-									step.unnamed ? "italic text-muted-foreground" : "text-foreground/90",
+									step.unnamed ? "italic text-muted-foreground" : "text-foreground-soft",
 								),
 							),
 							h.Title(step.name),

apps/web/src/charts/hbar-chart.ts

@@ -107,7 +107,7 @@ export const view = Submodel.defineView<Model, Message, HbarChartInputs>((model,
 						[
 							truncatedText(h, {
 								text: bar.name,
-								className: bar.unnamed ? "italic text-muted-foreground" : "text-foreground/90",
+								className: bar.unnamed ? "italic text-muted-foreground" : "text-foreground-soft",
 							}),
 							h.div(
 								[
@@ -129,8 +129,8 @@ export const view = Submodel.defineView<Model, Message, HbarChartInputs>((model,
 							h.span(
 								[h.Class("shrink-0 text-right tabular-nums text-muted-foreground")],
 								[
-									h.span([h.Class("text-foreground/90")], [fmtValue(bar.value, inputs.unit)]),
-									h.span([h.Class("px-1 text-muted-foreground/50")], ["·"]),
+									h.span([h.Class("text-foreground-soft")], [fmtValue(bar.value, inputs.unit)]),
+									h.span([h.Class("px-1 text-foreground-faint")], ["·"]),
 									h.span([], [formatPercent(bar.pctOfTotal, PCT_FLOOR)]),
 								],
 							),

apps/web/src/charts/heatmap-chart.ts

@@ -124,7 +124,7 @@ const tooltipBody = (
 							[h.Class("text-muted-foreground")],
 							[
 								h.span([], [tooltip.x]),
-								h.span([h.Class("px-1 text-muted-foreground/50")], ["·"]),
+								h.span([h.Class("px-1 text-foreground-faint")], ["·"]),
 								h.span([], [label(tooltip.y)]),
 							],
 						),
@@ -228,7 +228,7 @@ export const view = Submodel.defineView<Model, Message, HeatmapChartInputs>((cha
 					: {
 							footer: h.p(
 								[
-									h.Class("pt-1 text-right text-3xs leading-3 tabular-nums text-muted-foreground/70"),
+									h.Class("pt-1 text-right text-3xs leading-3 tabular-nums text-foreground-subtle"),
 									h.Style({
 										height: `${FOOTNOTE_BLOCK_H}px`,
 										"padding-left": `${layout.gutter}px`,

apps/web/src/charts/histogram-chart.ts

@@ -87,7 +87,7 @@ export const countTooltipBody = (
 		[h.Class("grid min-w-[9rem] items-start gap-1.5"), portal],
 		[
 			h.div(
-				[h.Class("border-border/60 border-b pb-1 font-medium text-muted-foreground tracking-tight")],
+				[h.Class("border-border-subtle border-b pb-1 font-medium text-muted-foreground tracking-tight")],
 				[heading],
 			),
 			h.div(

apps/web/src/charts/paths-chart.ts

@@ -65,7 +65,7 @@ const ribbons = (h: H, graph: PathsLayout, isLit: (link: PathLink) => boolean, h
 			h.Class(
 				cn(
 					"pointer-events-none",
-					kind === "event" && "fill-[var(--chart-2)]",
+					kind === "event" && "fill-chart-2",
 					kind === "end" && "fill-foreground",
 					kind === "other" && "fill-foreground",
 				),
@@ -102,7 +102,7 @@ const nodeGroup = (
 				...attrs(h, { x: node.x, y: node.y, width: NODE_W, height: node.h, rx: 2 }),
 				h.Class(
 					cn(
-						node.kind === "event" && "fill-[var(--chart-2)]",
+						node.kind === "event" && "fill-chart-2",
 						node.kind === "end" && "fill-foreground/20",
 						node.kind === "other" && "fill-foreground/35",
 					),

apps/web/src/charts/paths-tooltip.ts

@@ -43,7 +43,7 @@ const cameFrom = (h: H, inputs: PathsTooltipInputs): ReadonlyArray<Html> => {
 							[
 								icon(h, "ArrowLeftIcon", { size: 10, className: "shrink-0 text-muted-foreground" }),
 								h.span(
-									[h.Class("min-w-0 flex-1 truncate text-foreground/90")],
+									[h.Class("min-w-0 flex-1 truncate text-foreground-soft")],
 									[from === undefined ? "" : labelOf(from)],
 								),
 								h.span([h.Class("text-muted-foreground")], [link.count.toLocaleString("en-US")]),
@@ -53,7 +53,7 @@ const cameFrom = (h: H, inputs: PathsTooltipInputs): ReadonlyArray<Html> => {
 							[h.Class("relative mt-0.5 ml-4 h-1 rounded-sm bg-foreground/5")],
 							[
 								h.div([
-									h.Class("absolute inset-y-0 left-0 rounded-sm bg-[var(--chart-2)]/70"),
+									h.Class("absolute inset-y-0 left-0 rounded-sm bg-chart-2/70"),
 									h.Style({ width: `${share * 100}%` }),
 								]),
 							],
@@ -84,7 +84,7 @@ export const pathsTooltip = (h: H, inputs: PathsTooltipInputs): Html => {
 						h.Class(
 							cn(
 								"size-2 shrink-0 rounded-xs",
-								node.kind === "event" && "bg-[var(--chart-2)]",
+								node.kind === "event" && "bg-chart-2",
 								node.kind === "end" && "bg-foreground/20",
 								node.kind === "other" && "bg-foreground/35",
 							),
@@ -100,7 +100,7 @@ export const pathsTooltip = (h: H, inputs: PathsTooltipInputs): Html => {
 				[h.Class("mb-1.5 h-1.5 overflow-hidden rounded-sm bg-foreground/5")],
 				[
 					h.div([
-						h.Class("h-full rounded-sm bg-[var(--chart-2)]"),
+						h.Class("h-full rounded-sm bg-chart-2"),
 						h.Style({ width: `${Math.min(100, (node.count / anchor.count) * 100)}%` }),
 					]),
 				],

apps/web/src/charts/pie-chart.ts

@@ -121,8 +121,8 @@ const tooltipBody = (
 						h.div(
 							[h.Class("mt-0.5 text-muted-foreground tabular-nums")],
 							[
-								h.span([h.Class("text-foreground/90")], [fmtValue(slice.value, unit)]),
-								h.span([h.Class("px-1 text-muted-foreground/60")], ["·"]),
+								h.span([h.Class("text-foreground-soft")], [fmtValue(slice.value, unit)]),
+								h.span([h.Class("px-1 text-foreground-subtle")], ["·"]),
 								h.span([], [formatPercent(slice.fraction)]),
 							],
 						),

apps/web/src/charts/plot-legend.ts

@@ -59,9 +59,9 @@ const legendItem = (h: HtmlBuilder<Message>, state: PlotLegendState, entry: Plot
 			h.Class(
 				cn(
 					// Labels sit one step under the card title; the focused series reads full strength.
-					"flex items-center gap-1.5 rounded px-1 py-0.5 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+					"flex items-center gap-1.5 rounded-sm px-1 py-0.5 text-muted-foreground transition-colors hover:bg-surface-sunken hover:text-foreground",
 					isMuted && "opacity-40",
-					(isActive || (!hovering && isHighlighted)) && "bg-muted/50 text-foreground",
+					(isActive || (!hovering && isHighlighted)) && "bg-surface-sunken text-foreground",
 				),
 			),
 		],

apps/web/src/charts/timeseries-legend.ts

@@ -52,7 +52,7 @@ const compactLegend = (
 					h.Type("button"),
 					h.Class(
 						cn(
-							"hover:bg-muted/50 flex min-w-0 max-w-full items-center gap-1.5 rounded px-1 py-0.5 select-none",
+							"hover:bg-surface-sunken flex min-w-0 max-w-full items-center gap-1.5 rounded-sm px-1 py-0.5 select-none",
 							hidden.includes(entry.key) && "opacity-40",
 						),
 					),
@@ -132,7 +132,7 @@ const statsTable = (
 									h.OnClick(Message.ToggledLegendSeries({ key: entry.key, keys })),
 									h.Class(
 										cn(
-											"hover:bg-muted/50 cursor-pointer select-none",
+											"hover:bg-surface-sunken cursor-pointer select-none",
 											hidden.includes(entry.key) && "opacity-40",
 										),
 									),
@@ -170,7 +170,7 @@ const statsTable = (
 													[
 														h.Class(
 															cn(
-																"px-2 text-right font-mono tabular-nums text-muted-foreground/60 last:pr-0",
+																"px-2 text-right font-mono tabular-nums text-foreground-subtle last:pr-0",
 																column.className,
 															),
 														),

apps/web/src/components/infra/severity-tokens.ts

@@ -37,7 +37,7 @@ export const BAR_FILL: Record<SeverityLevel, string> = {
 
 /** Dimmer value-text tone used inside compact bar widgets. */
 export const BAR_VALUE_TONE: Record<SeverityLevel, string> = {
-	ok: "text-foreground/70",
+	ok: "text-foreground-soft",
 	warn: TONE_TEXT.warn,
 	crit: TONE_TEXT.crit,
 } satisfies Record<SeverityLevel, string>

apps/web/src/lab/charts/spike-view.ts

@@ -47,7 +47,7 @@ const stackTooltipBody = (h: H, bucket: BucketTooltip, total: string, portal: At
 		[h.Class("grid min-w-[9rem] items-start gap-1.5"), portal],
 		[
 			h.div(
-				[h.Class("border-border/50 border-b pb-1 font-medium text-muted-foreground tracking-tight")],
+				[h.Class("border-border-subtle border-b pb-1 font-medium text-muted-foreground tracking-tight")],
 				[bucket.heading],
 			),
 			h.div(
@@ -78,7 +78,7 @@ const stackTooltipBody = (h: H, bucket: BucketTooltip, total: string, portal: At
 			h.div(
 				[
 					h.Class(
-						"flex w-full items-center justify-between gap-3 border-border/50 border-t pt-1 leading-none",
+						"flex w-full items-center justify-between gap-3 border-border-subtle border-t pt-1 leading-none",
 					),
 				],
 				[h.span([h.Class("text-muted-foreground")], ["Total"]), figure(h, total)],
@@ -137,7 +137,7 @@ const keyValue = (h: H, label: string, value: string, className: string): Html =
 /** `BoxPlotSpike`'s body: the operation, then its outlier or its five-number summary. */
 const boxTooltipBody = (h: H, bucket: BucketTooltip, portal: Attribute<Message>): Html => {
 	const heading = h.div(
-		[h.Class("border-border/50 border-b pb-1 font-medium text-muted-foreground tracking-tight")],
+		[h.Class("border-border-subtle border-b pb-1 font-medium text-muted-foreground tracking-tight")],
 		[bucket.heading],
 	)
 	const row = (label: string, value: string, className: string) =>
@@ -270,7 +270,7 @@ export const spikeView = Submodel.defineView<Model, Message, SpikeInputs>((model
 			? undefined
 			: {
 					footer: h.p(
-						[h.Class("pt-1 text-right text-3xs text-muted-foreground/70")],
+						[h.Class("pt-1 text-right text-3xs text-foreground-subtle")],
 						[inputs.footer],
 					),
 				}),

apps/web/src/lab/entries/agent-sessions.ts

@@ -212,8 +212,8 @@ const labButton = (h: HtmlBuilder<Message>, label: string, isActive: boolean, on
 		[
 			h.Class(
 				isActive
-					? "rounded border border-border bg-accent px-2 py-1 text-xs"
-					: "rounded border border-border px-2 py-1 text-xs text-muted-foreground",
+					? "rounded-sm border border-border bg-accent px-2 py-1 text-xs"
+					: "rounded-sm border border-border px-2 py-1 text-xs text-muted-foreground",
 			),
 			h.Type("button"),
 			h.OnClick(onClick),

apps/web/src/lab/entries/agent-tools.ts

@@ -260,8 +260,8 @@ const update = (model: Model, message: Message): Return =>
 
 const toggleClass = (isActive: boolean): string =>
 	isActive
-		? "rounded border border-border bg-accent px-2 py-1 text-xs"
-		: "rounded border border-border px-2 py-1 text-xs text-muted-foreground"
+		? "rounded-sm border border-border bg-accent px-2 py-1 text-xs"
+		: "rounded-sm border border-border px-2 py-1 text-xs text-muted-foreground"
 
 const labButton = (h: HtmlBuilder<Message>, label: string, isActive: boolean, onClick: Message): Html =>
 	h.button([h.Class(toggleClass(isActive)), h.Type("button"), h.OnClick(onClick)], [label])

apps/web/src/lab/entries/bench/service-map.ts

@@ -179,7 +179,7 @@ const groupSwitch = (h: HtmlBuilder<Message>, groups: number): Html =>
 						h.OnClick(Message.ClickedNamespaceGroups({ groups: option })),
 						h.Class(
 							cn(
-								"rounded px-1.5 py-0.5 font-mono text-2xs transition-colors",
+								"rounded-sm px-1.5 py-0.5 font-mono text-2xs transition-colors",
 								option === groups
 									? "bg-primary text-primary-foreground"
 									: "text-muted-foreground hover:text-foreground",

apps/web/src/lab/entries/index.ts

@@ -27,7 +27,7 @@ const entryCard = <M>(h: HtmlBuilder<M>, entry: RegistryEntry): Html =>
 				[
 					h.Href(entry.path),
 					h.Class(
-						"flex h-full flex-col gap-1 rounded-md border bg-card px-3 py-2.5 transition-colors hover:bg-accent",
+						"flex h-full flex-col gap-1 rounded-md border bg-card p-3 transition-colors hover:bg-accent",
 					),
 				],
 				[

apps/web/src/lab/entries/replays.ts

@@ -105,8 +105,8 @@ const widthButton = (h: HtmlBuilder<Message>, model: Model, option: (typeof WIDT
 			h.OnClick(Message.ClickedWidth({ width: option.value })),
 			h.Class(
 				model.width === option.value
-					? "rounded border border-border bg-accent px-2 py-1 text-xs"
-					: "rounded border border-border px-2 py-1 text-xs text-muted-foreground",
+					? "rounded-sm border border-border bg-accent px-2 py-1 text-xs"
+					: "rounded-sm border border-border px-2 py-1 text-xs text-muted-foreground",
 			),
 		],
 		[option.label],
@@ -125,7 +125,7 @@ const page = (model: Model, h: HtmlBuilder<Message>): Html => {
 							[
 								h.Type("button"),
 								h.OnClick(Message.ClickedClear()),
-								h.Class("rounded border border-border px-2 py-1 text-xs"),
+								h.Class("rounded-sm border border-border px-2 py-1 text-xs"),
 							],
 							["Clear ", clearLabel(model)],
 						),

apps/web/src/lab/errors-lab/view.ts

@@ -31,15 +31,15 @@ const toggleGroup = <M, T>(
 		[
 			eyebrow(h, {}, [label]),
 			h.div(
-				[h.Class("flex items-center gap-0.5 rounded-md border border-border/60 p-0.5")],
+				[h.Class("flex items-center gap-0.5 rounded-md border border-border-subtle p-0.5")],
 				options.map((option) =>
 					h.button(
 						[
 							h.Type("button"),
 							h.OnClick(onChange(option.value)),
 							h.Class(
 								cn(
-									"h-6 rounded px-2 text-xs transition-colors",
+									"h-6 rounded-sm px-2 text-xs transition-colors",
 									option.value === active
 										? "bg-muted text-foreground"
 										: "text-muted-foreground hover:text-foreground",
@@ -70,7 +70,7 @@ const labStatStrip = <M>(h: HtmlBuilder<M>, summary: { totalErrors: number; erro
 					],
 				),
 			),
-			h.span([h.Class("text-muted-foreground/60")], ["in the last 24 hours"]),
+			h.span([h.Class("text-foreground-subtle")], ["in the last 24 hours"]),
 		],
 	)