feat(ui): finish the move to Geist: numbers, 13px chrome, sentence-case labels

apps/web/src/page/alerts/hub/view-routing.ts

@@ -433,12 +433,9 @@ const logTable = (
 						[
 							eyebrow(h, { className: hstackClass({ gap: "2" }) }, [
 								group.label,
-								h.span(
-									[
-										h.Class(
-											"tracking-normal normal-case text-foreground-subtle tabular-nums",
-										),
-									],
+								typography(
+									h,
+									{ tone: "subtle", numeric: true },
 									[
 										String(group.events.length),
 										" ",

apps/web/src/page/dashboards/widget/view-steps.ts

@@ -270,7 +270,7 @@ const filterLine = (
 	const parsed = parseFunnelStepFilter(filterClause)
 	return vstack(h, { gap: "0.5", className: "pl-6" }, [
 		hstack(h, { gap: "1.5" }, [
-			eyebrow(h, { className: "shrink-0" }, ["where"]),
+			eyebrow(h, { className: "shrink-0" }, ["Where"]),
 			whereEditor(h, {
 				id: `widget-step-${scope}-${index}-filter`,
 				value: filterClause,

apps/web/src/page/errors/issue/view-tables.ts

@@ -74,7 +74,7 @@ const incidentRow = <M>(h: HtmlBuilder<M>, incident: ErrorIncidentDocument, cloc
 				[
 					statusDot(h, { tone: isOpen ? "crit" : "neutral" }),
 					eyebrow(h, { variant: "label", className: isOpen ? "text-severity-error" : undefined }, [
-						incident.status,
+						Str.capitalize(incident.status),
 					]),
 				],
 			),

apps/web/src/page/infra-integrations/gcp/workload/view-sql-peek.ts

@@ -72,7 +72,7 @@ const header = (h: H, model: Model, peek: QueryPeek, inputs: QueryPeekInputs): H
 		[
 			eyebrow(h, { as: "div", className: hstackClass({ gap: "2" }) }, [
 				"Statement",
-				h.span([h.Class("normal-case tracking-normal")], [`· ${where}`]),
+				h.span([], [`· ${where}`]),
 			]),
 			DialogView.dialogTitle(h, "sheet", id, `Statement on ${where}`, "sr-only"),
 			DialogView.dialogDescription(

apps/web/src/page/investigations/detail/view-verdict.ts

@@ -87,7 +87,6 @@ const bigStat = <M>(h: HtmlBuilder<M>, elapsed: { value: string; unit: string }
 		: statFigure(h, {
 				value: elapsed.value,
 				unit: elapsed.unit,
-				mono: false,
 				valueClassName: "text-foreground",
 			})
 

apps/web/src/page/kit/code-block.ts

@@ -33,7 +33,7 @@ export const codeBlock = <M>(h: HtmlBuilder<M>, options: CodeBlockOptions<M>): H
 				h,
 				{ align: "center", justify: "between", className: "px-3 py-1.5 text-muted-foreground" },
 				[
-					...(options.language === undefined ? [] : [eyebrow(h, {}, [options.language])]),
+					...(options.language === undefined ? [] : [eyebrow(h, { variant: "mono" }, [options.language])]),
 					CopyButton.view(h, {
 						model: options.copy,
 						toParentMessage: options.toCopyMessage,

apps/web/src/page/kit/data-table.ts

@@ -10,10 +10,9 @@ import { infoHint } from "@maple/views/ui/info-hint"
 
 // A sortable data table: its column heads, numeric cells, row links, and empty and skeleton rows.
 
-/** A numeric cell's figure: xs mono tabular, right-aligned; the call site adds width and tone. */
+/** A numeric cell's figure: xs tabular, right-aligned; the call site adds width and tone. */
 export const NUMERIC_CELL = typographyClass({
 	size: "xs",
-	mono: true,
 	numeric: true,
 	className: "text-right",
 })

apps/web/src/page/kit/nav-shell.ts

@@ -34,7 +34,6 @@ const rowChildren = <M>(h: HtmlBuilder<M>, row: RowBase) => [
 					h,
 					{
 						size: "xs",
-						mono: true,
 						numeric: true,
 						tone: row.count.tone ?? "muted",
 						className: "shrink-0",

apps/web/src/page/kit/query-builder/where-editor.ts

@@ -138,7 +138,7 @@ export const highlightOverlay = <M>(
 						h.AriaHidden(true),
 						h.Class(
 							cn(
-								"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-sm",
+								"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-ui",
 								textareaClassName,
 							),
 						),

apps/web/src/page/kit/section-heading.ts

@@ -2,11 +2,11 @@ import { cn } from "@maple/ui/lib/utils"
 import type { Html, HtmlBuilder } from "foldkit/html"
 import { eyebrow } from "@maple/views/ui/eyebrow"
 
-// A section's heading: a title row with hint, count and actions, or the uppercase eyebrow overline.
+// A section's heading: a title row with hint, count and actions, or the eyebrow label.
 
 export type SectionHeadingOptions = Readonly<{
 	title: string
-	/** The uppercase overline above a form group or rail section, `mb-3` below. */
+	/** The eyebrow label above a form group or rail section, `mb-3` below. */
 	variant?: "title" | "eyebrow"
 	hint?: string
 	count?: Html | string

apps/web/src/page/kit/stat-rail.ts

@@ -97,8 +97,6 @@ export type StatRailItemOptions<M> = Readonly<{
 	ariaLabel?: string
 	size?: "md" | "sm"
 	hint?: Html | string
-	/** Title the tile like a chart card (the uppercase label eyebrow), for rails above chart grids. */
-	isCardTitle?: boolean
 }>
 
 export const statRailItem = <M>(h: HtmlBuilder<M>, options: StatRailItemOptions<M>): Html => {
@@ -121,7 +119,6 @@ export const statRailItem = <M>(h: HtmlBuilder<M>, options: StatRailItemOptions<
 						h.Class(
 							cn(
 								"truncate text-2xs font-medium",
-								options.isCardTitle === true && "uppercase tracking-caption",
 								isSelected ? "text-primary" : "text-muted-foreground",
 							),
 						),

apps/web/src/page/kit/where-autocomplete-view.ts

@@ -56,7 +56,7 @@ export const suggestionListbox = <M>(
 						[h.Class("min-w-0 truncate font-mono"), h.Title(suggestion.label)],
 						[suggestion.label],
 					),
-					eyebrow(h, { className: "shrink-0" }, [suggestion.kind]),
+					eyebrow(h, { variant: "mono", className: "shrink-0" }, [suggestion.kind]),
 				],
 			),
 		),

apps/web/src/page/metrics/detail/view-controls.ts

@@ -116,7 +116,7 @@ const whereEditor = (h: H, model: Model): Html => {
 								h.AriaHidden(true),
 								h.Class(
 									cn(
-										"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-sm",
+										"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-ui",
 										textareaClassName,
 									),
 								),

apps/web/src/page/overview/view-health.ts

@@ -347,7 +347,7 @@ const serviceRow = <M>(
 					h,
 					{ gap: "5", align: "center", className: "shrink-0 font-mono text-xs tabular-nums" },
 					[
-						metric(h, "err", formatErrorRate(service.errorRate), metricTone(causeOf("error"))),
+						metric(h, "Errors", formatErrorRate(service.errorRate), metricTone(causeOf("error"))),
 						metric(
 							h,
 							"p95",

apps/web/src/page/overview/view-usage.ts

@@ -40,7 +40,6 @@ export const usageCards = <M>(
 							? h.span([h.Class("sr-only")], ["Couldn't load"])
 							: h.span([h.Class("font-prose")], ["Couldn't load"]),
 						compact: true,
-						isCardTitle: true,
 						className: OVERVIEW_TILE_CLASS,
 					}),
 				),
@@ -54,7 +53,6 @@ export const usageCards = <M>(
 						eyebrow: card.title,
 						value: card.format(totals[card.key]),
 						compact: true,
-						isCardTitle: true,
 						className: OVERVIEW_TILE_CLASS,
 						delta:
 							previous === null

apps/web/src/page/replays/detail/view.ts

@@ -153,7 +153,7 @@ const identityBar = (h: H, model: IdentityView, session: ReplayDetail, timeZone:
 				typography(h, { size: "sm", weight: "semibold", mono: true, numeric: true }, [
 					formatSessionDuration(durationOf(session)),
 				]),
-				eyebrow(h, {}, ["duration"]),
+				eyebrow(h, {}, ["Duration"]),
 			]),
 			...(session.errorCount > 0 ? [errorCountPill(h, { count: session.errorCount })] : []),
 		]),

apps/web/src/page/service-map/view-db-panel.ts

@@ -182,7 +182,7 @@ const header = (h: H, inputs: DatabasePanelInputs): Html => {
 			typography(h, { size: "sm", tone: "foreground", weight: "semibold", truncate: true }, [
 				style.title,
 			]),
-			eyebrow(h, { className: "shrink-0" }, [style.badge]),
+			eyebrow(h, { variant: "mono", className: "shrink-0" }, [style.badge]),
 		],
 		[
 			iconButton(

apps/web/src/page/service-map/view-service-infra.ts

@@ -74,7 +74,7 @@ const workloadRow = (h: H, workload: ServiceWorkload, time: TimeSearch): Html =>
 				],
 			),
 			vstack(h, { align: "end", className: "gap-px shrink-0" }, [
-				eyebrow(h, {}, ["pods"]),
+				eyebrow(h, {}, ["Pods"]),
 				typography(
 					h,
 					{ size: "sm", tone: "foreground", weight: "semibold", mono: true, numeric: true },

apps/web/src/page/service-map/view.ts

@@ -248,7 +248,7 @@ export const view = Submodel.defineView<Model, Message, PageViewInputs>((model,
 							[
 								...dbEdgesTimedOutNotice(h, model),
 								h.div(
-									[h.Class("-mx-4 -mb-4 h-[calc(100vh-10rem)]")],
+									[h.Class("-mx-4 -mb-4 h-[calc(100vh-9rem)]")],
 									[mapArea(h, model, inputs)],
 								),
 							],

apps/web/src/page/services/detail/endpoint-peek/view.ts

@@ -342,7 +342,7 @@ const clientsCard = (h: H, detail: EndpointDetail, spanCount: number): Html => {
 			? typography(h, { size: "2xs", tone: "muted", as: "p" }, ["No requests carried a user agent"])
 			: vstack(
 					h,
-					{ gap: "1.5", className: typographyClass({ size: "2xs", numeric: true }) },
+					{ gap: "1.5", className: typographyClass({ size: "2xs", mono: true, numeric: true }) },
 					Arr.map(detail.userAgents.slice(0, 5), (agent) =>
 						hstack(h, { gap: "2", attributes: [h.Key(agent.value)] }, [
 							typography(

apps/web/src/page/services/list/view-table.ts

@@ -680,7 +680,7 @@ const mobileList = (
 																	className: "block",
 																}),
 															}),
-															eyebrow(h, { as: "div" }, ["err"]),
+															eyebrow(h, { as: "div" }, ["Errors"]),
 														],
 													),
 												],

apps/web/src/page/settings/billing/view-cycle.ts

@@ -65,7 +65,7 @@ const figure = (
 	}>,
 ): Html =>
 	vstack(h, { gap: "2", shrink: true, className: "p-4" }, [
-		// The uppercase overline every KPI tile uses (Overview's usage cards, the Stat widget).
+		// The label every KPI tile uses (Overview's usage cards, the Stat widget).
 		eyebrow(h, {}, [options.label]),
 		statFigure(h, { size: "lg", value: options.value, valueClassName: options.valueClassName }),
 		h.span([h.Class("font-prose text-2xs text-muted-foreground")], options.note),

apps/web/src/page/traces/list/view-advanced.ts

@@ -66,7 +66,7 @@ export const suggestionList = (h: H, model: Model): ReadonlyArray<Html> => {
 							},
 							[suggestion.label],
 						),
-						eyebrow(h, { className: "shrink-0" }, [suggestion.kind]),
+						eyebrow(h, { variant: "mono", className: "shrink-0" }, [suggestion.kind]),
 					],
 				)
 			}),
@@ -104,7 +104,7 @@ const editor = (h: H, model: Model): Html => {
 								h.AriaHidden(true),
 								h.Class(
 									cn(
-										"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-sm",
+										"pointer-events-none absolute inset-0 overflow-hidden rounded-lg border border-transparent text-base sm:text-ui",
 										TEXTAREA_CLASS,
 									),
 								),

apps/web/src/shell/palette/view.ts

@@ -25,11 +25,11 @@ import { hstack, hstackClass } from "@maple/views/ui/stack"
 import { Array as Arr } from "effect"
 
 /**
- * Layout-free wrapper: group labels take the sidebar's uppercase tracked style, and a short scroll
+ * Layout-free wrapper: group labels take the sidebar's group label style, and a short scroll
  * fade keeps the last visible row from reading as disabled.
  */
 const PALETTE_LIST_CLASS =
-	"contents [&_[data-slot=command-group-label]]:text-2xs [&_[data-slot=command-group-label]]:font-semibold [&_[data-slot=command-group-label]]:uppercase [&_[data-slot=command-group-label]]:tracking-overline [&_[data-slot=scroll-area-viewport]]:[--fade-size:0.5rem]"
+	"contents [&_[data-slot=command-group-label]]:text-xs [&_[data-slot=command-group-label]]:font-medium [&_[data-slot=scroll-area-viewport]]:[--fade-size:0.5rem]"
 
 // The command palette's popup: the input, the grouped entries (or "No results"), the footer hints.
 

apps/web/src/shell/view-topbar.ts

@@ -80,7 +80,7 @@ export const topbar = (
 			gap: "2",
 			align: "center",
 			as: "header",
-			className: "h-16 shrink-0 border-b px-4",
+			className: "h-12 shrink-0 border-b px-4",
 			attributes: [h.DataAttribute("slot", "app-topbar")],
 		},
 		[

docs/design-rules.md

@@ -42,8 +42,13 @@ only shrink (`bun run ui:patterns:check` in CI). The workflow is in `apps/web/CL
 ## Type and spacing
 
 - Weights are `font-normal`, `font-medium` and `font-semibold` (`maple/font-weight-scale`).
-- Tracking is a token. An uppercase label is the `eyebrow` kit, or `tracking-caption` (0.08em) /
-  `tracking-overline` (0.12em); display type may take `tracking-tight`; nothing else is spaced.
+- The interface reads in Geist. Chrome (nav rows, buttons, inputs, selects, tabs, breadcrumbs) is
+  13px (`text-ui`). Numbers stay in Geist and line up with `tabular-nums` (`numeric` on
+  `typography`); `font-mono` (`mono`) is for machine text: log lines, ids, code, queries.
+- A group, column or stat label is the `eyebrow` kit: sentence case, no tracking. Uppercase is for a
+  machine tag (a badge `tag`, a log level, the `mono` eyebrow) and takes `tracking-caption` (0.08em)
+  or `tracking-overline` (0.12em).
+- Tracking is a token. Display type may take `tracking-tight`; nothing else is spaced.
   Tailwind's `tracking-wide`, `-wider`, `-widest` are banned (`maple/tracking-tokens`).
 - Spacing moves in half steps (2px). A quarter step (`gap-0.75`, `pl-3.75`) is an odd pixel; when a
   pixel offset is the point (centring a dot on a text line, meeting a rail), write it from a scale

packages/ui/src/styles/tokens.css

@@ -532,8 +532,8 @@
 	--text-figure: 1.625rem;
 	/* Inline code inside prose: a touch under the surrounding text, whatever its size. */
 	--text-code: 0.9em;
-	/* Tracking: `overline` for eyebrows and column labels, `caption` for the larger stat-tile
-	   caption, `figure` pulls a large stat figure in a touch. */
+	/* Tracking: `overline` and `caption` space the uppercase tags that remain (badges, log
+	   levels, the mono eyebrow); `figure` pulls a large stat figure in a touch. */
 	--tracking-overline: 0.12em;
 	--tracking-caption: 0.08em;
 	--tracking-figure: -0.01em;
@@ -818,14 +818,6 @@
 	html {
 		@apply font-sans;
 	}
-	/* Chrome reads in Geist; numbers that line up in a column stay in the mono face, except the
-	   large stat figure. A `font-sans` utility on the element still wins. */
-	.tabular-nums {
-		@apply font-mono;
-	}
-	.text-figure {
-		@apply font-sans;
-	}
 }
 
 /* xyflow Controls styling, shared by the flow views in @maple/views (service map,

packages/views/src/charts/paths-chart.ts

@@ -76,7 +76,7 @@ const columnHeaders = (h: H, graph: PathsLayout, reverse: boolean): ReadonlyArra
 					y: 10,
 					"text-anchor": atRightEdge ? "end" : "start",
 				}),
-				h.Class("fill-muted-foreground text-3xs font-medium uppercase tracking-caption"),
+				h.Class("fill-muted-foreground text-2xs font-medium"),
 			],
 			[label],
 		)

packages/views/src/charts/plot-legend.ts

@@ -28,7 +28,7 @@ export interface PlotLegendState {
 const legendValue = (h: HtmlBuilder<Message>, value: string, secondary: string | undefined): Html =>
 	hstack(
 		h,
-		{ gap: "2", align: "baseline", as: "span", className: "ml-auto shrink-0 font-mono tabular-nums" },
+		{ gap: "2", align: "baseline", as: "span", className: "ml-auto shrink-0 tabular-nums" },
 		[
 			typography(h, { tone: "foreground" }, [value]),
 			...(secondary === undefined

packages/views/src/charts/timeseries-legend.ts

@@ -175,15 +175,15 @@ const statsTable = (
 														? [entryStats === null ? EMPTY_VALUE : "0"]
 														: [],
 													cn(
-														"px-2 py-0 text-right font-mono leading-4 tabular-nums text-foreground-subtle last:pr-0",
+														"px-2 py-0 text-right leading-4 tabular-nums text-foreground-subtle last:pr-0",
 														column.className,
 													),
 												)
 											: tableCell(
 													h,
 													[formatValueByUnit(entryStats[column.field], unit)],
 													cn(
-														"px-2 py-0 text-right font-mono leading-4 tabular-nums last:pr-0",
+														"px-2 py-0 text-right leading-4 tabular-nums last:pr-0",
 														column.className,
 													),
 												),

packages/views/src/service-map/graph/service-map-db-style.ts

@@ -186,7 +186,7 @@ export function getDbStyle(system: string | undefined): DbStyle {
 export interface DbNodeStyle {
 	/** Node title: the database identity, or "Hyperdrive" for the collapsed proxy node. */
 	title: string
-	/** Small uppercase badge: the underlying system, or the coarse category. */
+	/** Small badge: the underlying system, or the coarse category. */
 	badge: string
 	icon: DbIconKey
 	color: string

packages/views/src/service-map/map/node-card.ts

@@ -99,7 +99,7 @@ export const metricCell = <M>(
 	valueClassName?: string,
 ): Html =>
 	vstack(h, { className: "gap-px" }, [
-		eyebrow(h, { className: "text-4xs text-foreground-subtle" }, [label]),
+		eyebrow(h, { variant: "mono", className: "text-4xs" }, [label]),
 		h.span(
 			[
 				h.Class(

packages/views/src/service-map/map/nodes.ts

@@ -48,7 +48,7 @@ const tintedCard = (color: string, tint: number, border: number, selected: boole
 
 const podsCell = <M>(h: HtmlBuilder<M>, data: ServiceNodeData): Html =>
 	vstack(h, { align: "end", className: "ml-auto gap-px" }, [
-		eyebrow(h, { className: "text-4xs text-foreground-subtle" }, ["pods"]),
+		eyebrow(h, { variant: "mono", className: "text-4xs" }, ["pods"]),
 		data.infra
 			? tooltipTrigger(h, [
 					hstack(
@@ -123,7 +123,8 @@ const serviceNode = <M>(h: HtmlBuilder<M>, id: string, data: ServiceNodeData): R
 										? eyebrow(
 												h,
 												{
-													className: "shrink-0 text-4xs text-foreground-subtle",
+													variant: "mono",
+													className: "shrink-0 text-4xs",
 												},
 												[runtimeInfo.short],
 											)

packages/views/src/ui/INDEX.md

@@ -59,7 +59,7 @@ existing copies onto it (see `apps/web/CLAUDE.md`).
 - `packages/views/src/ui/error-count-pill.ts` `errorCountPill`: `ErrorCountPill`: a failure count as a toned pill, led by a dot or its kind's glyph.
 - `packages/views/src/ui/error-section.ts` `errorSectionView`: `ErrorSection`: the error banner, its highlighted body that copies itself, the "Copy as prompt" control and the Show more toggle.
 - `packages/views/src/ui/error-state.ts` `failureKind`, `failureSentence`, `autoRetryMessage`, `errorState`: The error state: a failure's glyph, sentence and retry.
-- `packages/views/src/ui/eyebrow.ts` `withHint`, `eyebrow`: Keeps a trailing "(hint)" out of the uppercase transform; for any uppercased label.
+- `packages/views/src/ui/eyebrow.ts` `withHint`, `eyebrow`: Keeps a trailing "(hint)" out of an uppercase transform; for any uppercased label.
 - `packages/views/src/ui/field.ts` `stateOf`, `controlAttributes`, `field`, `fieldLabel`, `fieldGroupLabel`, `input`, `fieldDescription`, `fieldError`, `fieldErrorText` (stateful: Model, init, update): The value and focus handlers a field's control reports through.
 - `packages/views/src/ui/file-input.ts` `fileInput`: `FileInput`: a hidden `<input type="file">` that a visible button opens by id; it reports the picked files.
 - `packages/views/src/ui/filter-chip.ts` `filterChip`, `filterChipItem`: An on/off filter toggle with an optional tone dot and trailing count.
@@ -286,7 +286,7 @@ existing copies onto it (see `apps/web/CLAUDE.md`).
 - `apps/web/src/page/kit/route-window.ts` `isWindowChange`, `snapModeOf`, `routeWindowStep`: A page's time window across `routeChanged`: re-resolved only when its own fields moved, and only Reload revalidates unchanged keys.
 - `apps/web/src/page/kit/save-bar.ts` `saveBar`: Pinned while a settings tab has unsaved edits.
 - `apps/web/src/page/kit/sdk-snippets.ts` `sdkSnippets`, `register`, `fillSnippet`: The snippet's text with the endpoint and key filled in.
-- `apps/web/src/page/kit/section-heading.ts` `sectionHeading`: A section's heading: a title row with hint, count and actions, or the uppercase eyebrow overline.
+- `apps/web/src/page/kit/section-heading.ts` `sectionHeading`: A section's heading: a title row with hint, count and actions, or the eyebrow label.
 - `apps/web/src/page/kit/sentence-card.ts` `sentenceCardHeadingId`, `sentenceCardSummaryId`, `sentenceCard`, `sentenceChain`, `sentenceRow`, `sentencePhrase`, `sentenceClause`, `sentenceSection`: Sentence cards: a form that reads top to bottom as one sentence ("When ...
 - `apps/web/src/page/kit/series-legend.ts` `seriesLegend`
 - `apps/web/src/page/kit/service-health-rollup.ts` `alertIncidentCauseLabel`, `anomalyDirection`, `deriveServiceHealthFromCauses`, `primaryServiceHealthCause`, `healthRank`, `baselineKey`, `buildBaselineMap`: Health rollup for a single service.