@podoba/react 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.17",
+	"version": "0.0.19",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.17",
-		"@podoba/tailwind": "^0.0.17",
+		"@podoba/tokens": "^0.0.19",
+		"@podoba/tailwind": "^0.0.19",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -141,12 +141,12 @@ export function BrandPageHeader({
 								onPress={() => setExpanded(!expanded)}
 								aria-expanded={expanded}
 								aria-controls={PANEL_ID}
-								className="h-10 rounded-full bg-brand-secondary px-5 text-sm font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
+								className="h-10 rounded-full bg-brand-secondary px-5 text-small font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
 							>
 								{ctaLabel}
 							</Button>
 						) : (
-							<Button className="h-10 rounded-full bg-brand-secondary px-5 text-sm font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80">
+							<Button className="h-10 rounded-full bg-brand-secondary px-5 text-small font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80">
 								{ctaLabel}
 							</Button>
 						)}

package/src/components/checkbox.tsx

@@ -37,7 +37,7 @@ export type CheckboxProps = Omit<RACCheckboxProps, 'children'> & {
 export const Checkbox = ({ children, ...props }: CheckboxProps) => (
 	<RACCheckbox
 		{...props}
-		className="group flex cursor-pointer select-none items-center gap-3 text-sm text-fg data-[disabled]:cursor-not-allowed"
+		className="group flex cursor-pointer select-none items-center gap-3 text-small text-fg data-[disabled]:cursor-not-allowed"
 	>
 		{({ isSelected, isIndeterminate }) => (
 			<>

package/src/components/combobox.tsx

@@ -36,7 +36,7 @@ const Chevron = () => (
 const ComboBoxInput = uic(RACInput, {
 	displayName: 'ComboBoxInput',
 	baseClass:
-		'h-12 w-full rounded-lg border border-border bg-surface pl-4 pr-11 text-sm text-fg ' +
+		'h-12 w-full rounded-lg border border-border bg-surface pl-4 pr-11 text-small text-fg ' +
 		'outline-none transition-colors placeholder:text-fg-muted ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
@@ -48,7 +48,7 @@ export const ComboBoxItem = uic(ListBoxItem, {
 	displayName: 'ComboBoxItem',
 	// Matches SelectItem so the two dropdowns are indistinguishable.
 	baseClass:
-		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-small text-fg outline-none ' +
 		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
@@ -76,7 +76,7 @@ export const ComboBox = <T extends object>({
 	const inFocus = useInFocusOverlay()
 	const { contains } = useFilter({ sensitivity: 'base' })
 	const desc = description ? (
-		<Text slot="description" className="text-xs text-fg-muted">
+		<Text slot="description" className="text-label text-fg-muted">
 			{description}
 		</Text>
 	) : null
@@ -101,14 +101,14 @@ export const ComboBox = <T extends object>({
 							const k = keys === 'all' ? undefined : [...keys][0]
 							onSelectionChange?.(k ?? null)
 						}}
-						renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
+						renderEmptyState={() => <div className="px-3 py-2 text-small text-fg-muted">No results</div>}
 						className="mt-2 flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
 					>
 						{children}
 					</ListBox>
 				</Autocomplete>
 				{desc}
-				{errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
+				{errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null}
 			</div>
 		)
 	}
@@ -132,11 +132,11 @@ export const ComboBox = <T extends object>({
 				</RACButton>
 			</div>
 			{desc}
-			<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+			<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 			<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
 				<ListBox
 					className="flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
-					renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
+					renderEmptyState={() => <div className="px-3 py-2 text-small text-fg-muted">No results</div>}
 				>
 					{children}
 				</ListBox>

package/src/components/count-up.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, type ElementType } from 'react'
+
+/**
+ * CountUp — animates a number from 0 up to `value` on mount (and whenever `value`
+ * changes), for the subtle "counting up" effect on dashboard stats. easeOutCubic over
+ * ~900ms by default. Respects `prefers-reduced-motion` (renders the final value
+ * immediately). Presentational only — pass formatting via `format`.
+ */
+export interface CountUpProps {
+	/** Target value to count up to. */
+	value: number
+	/** Animation duration in ms (default 900). */
+	durationMs?: number
+	/** Format the displayed number (default `toLocaleString`). */
+	format?: (n: number) => string
+	/** Element to render as (default `span`). */
+	as?: ElementType
+	className?: string
+}
+
+const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
+
+export function CountUp({
+	value,
+	durationMs = 900,
+	format = (n) => n.toLocaleString(),
+	as: Tag = 'span',
+	className,
+}: CountUpProps) {
+	const [display, setDisplay] = useState(value)
+	const rafRef = useRef<number | null>(null)
+	const startRef = useRef<number | null>(null)
+
+	useEffect(() => {
+		if (typeof window === 'undefined') return
+		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+		if (reduce || durationMs <= 0) {
+			setDisplay(value)
+			return
+		}
+		startRef.current = null
+		const tick = (now: number) => {
+			if (startRef.current === null) startRef.current = now
+			const progress = Math.min(1, (now - startRef.current) / durationMs)
+			setDisplay(Math.round(value * easeOutCubic(progress)))
+			if (progress < 1) rafRef.current = requestAnimationFrame(tick)
+		}
+		rafRef.current = requestAnimationFrame(tick)
+		return () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+		}
+	}, [value, durationMs])
+
+	return (
+		<Tag className={className} aria-label={format(value)}>
+			{format(display)}
+		</Tag>
+	)
+}

package/src/components/date-field.tsx

@@ -28,7 +28,7 @@ export const segmentClass =
 	'data-[disabled]:opacity-50 data-[type=literal]:px-0 data-[type=literal]:text-fg-muted'
 
 export const dateInputClass =
-	'flex h-12 w-full items-center gap-0.5 rounded-lg border border-border bg-surface px-4 text-sm text-fg transition-colors ' +
+	'flex h-12 w-full items-center gap-0.5 rounded-lg border border-border bg-surface px-4 text-small text-fg transition-colors ' +
 	'hover:border-fg-subtle focus-within:border-brand-green focus-within:ring-2 focus-within:ring-ring ' +
 	'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger'
 
@@ -43,11 +43,11 @@ export const DateField = <T extends DateValue>({ label, description, errorMessag
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</RACDateField>
 )
 
@@ -62,10 +62,10 @@ export const TimeField = <T extends TimeValue>({ label, description, errorMessag
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</RACTimeField>
 )

package/src/components/date-picker.tsx

@@ -41,7 +41,7 @@ const Chevron = ({ dir }: { dir: 'left' | 'right' }) => (
 )
 
 const calendarCellClass =
-	'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-sm text-fg outline-none transition-colors ' +
+	'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-small text-fg outline-none transition-colors ' +
 	'data-[outside-month]:text-fg-subtle data-[hovered]:bg-surface-muted ' +
 	'data-[selected]:bg-fg data-[selected]:text-fg-inverted data-[selected]:font-medium ' +
 	'data-[unavailable]:text-fg-subtle data-[unavailable]:line-through ' +
@@ -54,7 +54,7 @@ function CalendarBody() {
 				<RACButton slot="previous" className={navButton}>
 					<Chevron dir="left" />
 				</RACButton>
-				<Heading className="text-sm font-medium text-fg" />
+				<Heading className="text-small font-medium text-fg" />
 				<RACButton slot="next" className={navButton}>
 					<Chevron dir="right" />
 				</RACButton>
@@ -104,11 +104,11 @@ export const DatePicker = <T extends DateValue>({ label, description, errorMessa
 				)}
 			</Group>
 			{description ? (
-				<Text slot="description" className="text-xs text-fg-muted">
+				<Text slot="description" className="text-label text-fg-muted">
 					{description}
 				</Text>
 			) : null}
-			<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+			<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 			{inFocus ? (
 				<div className="mt-2 -ml-2">
 					<CalendarBody />

package/src/components/delivery/delivery-status-module.tsx

@@ -75,13 +75,13 @@ export function DeliveryStatusModule({
 
 	return (
 		<DeliveryStatusModuleRoot data-testid={testId}>
-			<div className="flex items-center justify-between gap-4 text-sm font-medium">
+			<div className="flex items-center justify-between gap-4 text-small font-medium">
 				<span>{heading}</span>
 				{headingMeta != null ? <span>{headingMeta}</span> : null}
 			</div>
 
 			{statusText != null ? (
-				<p className="m-0 text-xs text-white/70">{statusText}</p>
+				<p className="m-0 text-label text-white/70">{statusText}</p>
 			) : null}
 
 			{hasProgress ? (
@@ -97,7 +97,7 @@ export function DeliveryStatusModule({
 			) : null}
 
 			{children != null ? (
-				<div className="flex flex-wrap items-center gap-2 text-xs text-white/80">
+				<div className="flex flex-wrap items-center gap-2 text-label text-white/80">
 					{children}
 				</div>
 			) : null}

package/src/components/delivery/download-modal.tsx

@@ -109,11 +109,11 @@ export function DownloadModal({
 			onOpenChange={onOpenChange}
 		>
 			<div className="flex flex-col gap-3">
-				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<p className="text-small text-fg-muted">{labels.body}</p>
 
 				{hasArtifact ? (
 					<>
-						<p data-testid="delivery-download-ready" role="status" className="text-sm text-fg">
+						<p data-testid="delivery-download-ready" role="status" className="text-small text-fg">
 							{labels.ready}
 						</p>
 						<div className="mt-2 flex justify-end gap-2">
@@ -126,7 +126,7 @@ export function DownloadModal({
 								data-testid="delivery-download-link"
 								href={artifactUrl ?? undefined}
 								download
-								className="inline-flex h-8 items-center justify-center gap-2 rounded-md bg-brand-primary px-3 text-sm font-medium text-fg-inverted no-underline outline-none transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+								className="inline-flex h-8 items-center justify-center gap-2 rounded-md bg-brand-primary px-3 text-small font-medium text-fg-inverted no-underline outline-none transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 							>
 								{labels.download}
 							</a>
@@ -134,7 +134,7 @@ export function DownloadModal({
 					</>
 				) : isPreparing ? (
 					<>
-						<p data-testid="delivery-download-preparing" role="status" className="text-sm text-fg-muted">
+						<p data-testid="delivery-download-preparing" role="status" className="text-small text-fg-muted">
 							{labels.preparing}
 						</p>
 						<div className="mt-2 flex justify-end gap-2">
@@ -151,7 +151,7 @@ export function DownloadModal({
 							onChange={(value: string) => setFormat(value as DownloadFormat)}
 							className="flex flex-col gap-2"
 						>
-							<Label className="text-sm font-medium text-fg">{labels.formatLabel}</Label>
+							<Label className="text-small font-medium text-fg">{labels.formatLabel}</Label>
 							<div className="flex gap-2">
 								<DownloadFormatOption value="png" label={labels.formatPng} />
 								<DownloadFormatOption value="pdf" label={labels.formatPdf} />
@@ -159,7 +159,7 @@ export function DownloadModal({
 						</RadioGroup>
 
 						{error ? (
-							<p data-testid="delivery-download-error" role="alert" className="text-sm text-danger">
+							<p data-testid="delivery-download-error" role="alert" className="text-small text-danger">
 								{error}
 							</p>
 						) : null}
@@ -196,7 +196,7 @@ function DownloadFormatOption({ value, label }: { value: Key; label: string }):
 	return (
 		<Radio
 			value={String(value)}
-			className="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[selected]:border-brand-primary data-[selected]:font-medium"
+			className="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-3 py-2 text-small text-fg outline-none transition-colors data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[selected]:border-brand-primary data-[selected]:font-medium"
 		>
 			{label}
 		</Radio>

package/src/components/delivery/publish-modal.tsx

@@ -115,7 +115,7 @@ export function PublishModal({
 			onOpenChange={handleOpenChange}
 		>
 			<div className="flex flex-col gap-3">
-				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<p className="text-small text-fg-muted">{labels.body}</p>
 
 				<Input
 					label={labels.destinationLabel}
@@ -139,7 +139,7 @@ export function PublishModal({
 				</Select>
 
 				{error ? (
-					<p data-testid="delivery-publish-error" role="alert" className="text-sm text-danger">
+					<p data-testid="delivery-publish-error" role="alert" className="text-small text-danger">
 						{error}
 					</p>
 				) : null}

package/src/components/delivery/send-to-print-modal.tsx

@@ -149,7 +149,7 @@ export function SendToPrintModal({
 			onOpenChange={handleOpenChange}
 		>
 			<div className="flex flex-col gap-3">
-				<p className="text-sm text-fg-muted">{labels.body}</p>
+				<p className="text-small text-fg-muted">{labels.body}</p>
 
 				<Input
 					label={labels.sizeLabel}
@@ -185,7 +185,7 @@ export function SendToPrintModal({
 				/>
 
 				{error ? (
-					<p data-testid="delivery-print-error" role="alert" className="text-sm text-danger">
+					<p data-testid="delivery-print-error" role="alert" className="text-small text-danger">
 						{error}
 					</p>
 				) : null}

package/src/components/dialog.tsx

@@ -152,7 +152,7 @@ export const Dialog = ({
 													{title}
 												</Heading>
 												{badge ? (
-													<span className="inline-flex shrink-0 items-center rounded-full bg-surface-muted px-2 py-0.5 text-xs font-medium text-fg-muted">
+													<span className="inline-flex shrink-0 items-center rounded-full bg-surface-muted px-2 py-0.5 text-label font-medium text-fg-muted">
 														{badge}
 													</span>
 												) : null}

package/src/components/dropdown-menu.tsx

@@ -57,13 +57,13 @@ export const DropdownMenuTrigger = RACMenuTrigger
 // gs `.item`: 12/16px padding, 6px radius, base text on white; hover/focus wash
 // `#f7f6f2` (→ surface-card). We light up both `data-[focused]` (keyboard) and
 // `data-[hovered]` (pointer) so keyboard focus stays clearly visible. Item text
-// size follows the house light Select (`text-sm`) rather than gs's 16px base so
+// size follows the house light Select (`text-small`) rather than gs's 16px base so
 // the two light dropdowns stay consistent.
 export const DropdownMenuItem = uic(RACMenuItem, {
 	displayName: 'DropdownMenuItem',
 	baseClass:
 		'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
-		'text-sm text-fg outline-none ' +
+		'text-small text-fg outline-none ' +
 		'data-[focused]:bg-surface-card data-[hovered]:bg-surface-card ' +
 		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
 	variants: {

package/src/components/feature-tile.tsx

@@ -125,7 +125,7 @@ export function FeatureTile({
 					    or badge falls through to the play/press overlay; only `action`
 					    re-enables its own pointer events. */}
 					<div className="pointer-events-none absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
-						<h2 className="max-w-md text-display-xl font-medium leading-tight text-white">
+						<h2 className="max-w-md text-display font-medium leading-tight text-white">
 							{title}
 						</h2>
 						<div className="flex items-center justify-between gap-4">

package/src/components/file-upload.tsx

@@ -47,7 +47,7 @@ export const FileUpload = ({ label, description, accept, allowsMultiple, onFiles
 					'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
 				}
 			>
-				<Text slot="label" className="text-sm text-fg-muted">
+				<Text slot="label" className="text-small text-fg-muted">
 					Drag &amp; drop {allowsMultiple ? 'files' : 'a file'} here, or
 				</Text>
 				<FileTrigger
@@ -59,9 +59,9 @@ export const FileUpload = ({ label, description, accept, allowsMultiple, onFiles
 						Choose {allowsMultiple ? 'files' : 'file'}
 					</Button>
 				</FileTrigger>
-				{names.length > 0 ? <span className="max-w-full truncate text-xs text-fg">{names.join(', ')}</span> : null}
+				{names.length > 0 ? <span className="max-w-full truncate text-label text-fg">{names.join(', ')}</span> : null}
 			</DropZone>
-			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
+			{description ? <span className="text-label text-fg-muted">{description}</span> : null}
 		</div>
 	)
 }

package/src/components/focus-field.tsx

@@ -90,7 +90,7 @@ const OVERLAY_EDITOR =
 
 function IconBadge({ icon }: { icon: ReactNode }) {
 	return (
-		<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-muted text-sm font-medium text-fg">
+		<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface-muted text-small font-medium text-fg">
 			{icon}
 		</div>
 	)
@@ -164,8 +164,8 @@ export function FocusField({
 			>
 				{icon ? <IconBadge icon={icon} /> : null}
 				<div className="min-w-0 flex-1">
-					<div className="text-sm text-fg-muted">{label}</div>
-					<div className="mt-1 truncate text-base text-fg">
+					<div className="text-small text-fg-muted">{label}</div>
+					<div className="mt-1 truncate text-body text-fg">
 						{hasValue ? preview : <span className="text-fg-subtle">{placeholder}</span>}
 					</div>
 				</div>
@@ -198,7 +198,7 @@ export function FocusField({
 									<div className="flex items-start gap-3">
 										{icon ? <IconBadge icon={icon} /> : null}
 										<div className="min-w-0 flex-1 pr-10">
-											<div className="text-sm text-fg-muted">{label}</div>
+											<div className="text-small text-fg-muted">{label}</div>
 											<div className={OVERLAY_EDITOR}>{children}</div>
 										</div>
 									</div>

package/src/components/input.tsx

@@ -28,7 +28,7 @@ const StyledInput = uic(RACInput, {
 	// Identical to textarea.tsx's filled-field skin; `fieldSize` adds the
 	// single-line height (gs sizes the field via padding only).
 	baseClass:
-		'w-full rounded-lg border border-border bg-surface px-4 text-sm text-fg ' +
+		'w-full rounded-lg border border-border bg-surface px-4 text-small text-fg ' +
 		'outline-none transition-colors duration-200 placeholder:text-fg-muted ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
@@ -64,10 +64,10 @@ export const Input = ({ label, description, errorMessage, placeholder, size, ...
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<StyledInput placeholder={placeholder} fieldSize={size} />
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</TextField>
 )

package/src/components/multiselect.tsx

@@ -51,7 +51,7 @@ const MultiSelectItem = uic(ListBoxItem, {
 	displayName: 'MultiSelectItem',
 	// `group` so the leading Check can react to this item's data-selected.
 	baseClass:
-		'group flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'group flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-small text-fg outline-none ' +
 		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
@@ -116,7 +116,7 @@ export const MultiSelect = ({
 			selectionMode="multiple"
 			selectedKeys={selected}
 			onSelectionChange={handleChange}
-			renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No matches</div>}
+			renderEmptyState={() => <div className="px-3 py-2 text-small text-fg-muted">No matches</div>}
 			className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
 		>
 			{options.map((o) => (
@@ -133,7 +133,7 @@ export const MultiSelect = ({
 			<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
 				<RACInput
 					placeholder="Search…"
-					className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
+					className="w-full rounded-md bg-surface px-3 py-2 text-small text-fg outline-none placeholder:text-fg-muted"
 				/>
 			</SearchField>
 			{list}
@@ -142,8 +142,8 @@ export const MultiSelect = ({
 		list
 	)
 
-	const desc = description ? <span className="text-xs text-fg-muted">{description}</span> : null
-	const err = isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null
+	const desc = description ? <span className="text-label text-fg-muted">{description}</span> : null
+	const err = isInvalid && errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null
 
 	return (
 		<div className={clsx('flex flex-col gap-2', className)}>
@@ -165,7 +165,7 @@ export const MultiSelect = ({
 						isDisabled={isDisabled}
 						onPress={() => setOpen(true)}
 						className={clsx(
-							'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
+							'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-small text-fg outline-none transition-colors',
 							'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
 							'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
 							isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',

package/src/components/number-field.tsx

@@ -16,7 +16,7 @@ import {
  * Components `NumberField`; styled to match the other form fields.
  */
 const stepper =
-	'flex h-full w-9 shrink-0 items-center justify-center text-base text-fg-muted outline-none transition-colors ' +
+	'flex h-full w-9 shrink-0 items-center justify-center text-body text-fg-muted outline-none transition-colors ' +
 	'hover:bg-surface-muted hover:text-fg data-[pressed]:bg-surface-muted data-[disabled]:opacity-40'
 
 export type NumberFieldProps = RACNumberFieldProps & {
@@ -32,7 +32,7 @@ export const NumberField = ({ label, description, errorMessage, placeholder, ...
 		<Label className="text-heading5 font-medium text-fg">{label}</Label>
 		<Group
 			className={
-				'flex h-12 w-full items-center overflow-hidden rounded-lg border border-border bg-surface text-sm text-fg transition-colors ' +
+				'flex h-12 w-full items-center overflow-hidden rounded-lg border border-border bg-surface text-small text-fg transition-colors ' +
 				'data-[hovered]:border-fg-subtle ' +
 				'data-[focus-within]:border-brand-green data-[focus-within]:ring-2 data-[focus-within]:ring-ring ' +
 				'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
@@ -44,17 +44,17 @@ export const NumberField = ({ label, description, errorMessage, placeholder, ...
 			</RACButton>
 			<RACInput
 				placeholder={placeholder}
-				className="min-w-0 flex-1 bg-transparent px-4 text-sm tabular-nums text-fg outline-none placeholder:text-fg-muted"
+				className="min-w-0 flex-1 bg-transparent px-4 text-small tabular-nums text-fg outline-none placeholder:text-fg-muted"
 			/>
 			<RACButton slot="increment" className={`${stepper} border-l border-border`}>
 				+
 			</RACButton>
 		</Group>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</RACNumberField>
 )

package/src/components/radio.tsx

@@ -31,14 +31,14 @@ export type RadioGroupProps = RACRadioGroupProps & {
 
 export const RadioGroup = ({ label, description, errorMessage, children, ...props }: RadioGroupProps) => (
 	<RACRadioGroup {...props} className="flex flex-col gap-2">
-		{label ? <Label className="text-sm font-medium text-fg">{label}</Label> : null}
+		{label ? <Label className="text-small font-medium text-fg">{label}</Label> : null}
 		<div className="flex flex-col gap-3">{children}</div>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</RACRadioGroup>
 )
 
@@ -50,7 +50,7 @@ export type RadioProps = Omit<RACRadioProps, 'children'> & {
 export const Radio = ({ children, ...props }: RadioProps) => (
 	<RACRadio
 		{...props}
-		className="group flex cursor-pointer select-none items-center gap-3 text-sm text-fg data-[disabled]:cursor-not-allowed"
+		className="group flex cursor-pointer select-none items-center gap-3 text-small text-fg data-[disabled]:cursor-not-allowed"
 	>
 		{/* gs token map: border #eceae1 → border · hover #aba89c → fg-subtle ·
 		    selected dot/border #0d0d0d → fg · error → danger. */}

package/src/components/request-changes-modal.tsx

@@ -87,8 +87,8 @@ export function RequestChangesModal({
 			}}
 		>
 			<div className="flex flex-col gap-3">
-				<p className="text-sm text-fg-muted">{labels.body}</p>
-				<label htmlFor={noteId} className="text-sm font-medium text-fg">
+				<p className="text-small text-fg-muted">{labels.body}</p>
+				<label htmlFor={noteId} className="text-small font-medium text-fg">
 					{labels.noteLabel}
 				</label>
 				<textarea
@@ -101,10 +101,10 @@ export function RequestChangesModal({
 					required
 					aria-invalid={isEmpty ? true : undefined}
 					placeholder={labels.notePlaceholder}
-					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
+					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-small text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
 				/>
 				{error ? (
-					<p data-testid="request-changes-error" role="alert" className="text-sm text-danger">
+					<p data-testid="request-changes-error" role="alert" className="text-small text-danger">
 						{error}
 					</p>
 				) : null}

package/src/components/rich-text-editor.tsx

@@ -137,7 +137,7 @@ export function RichTextEditor({
 							title={t.title}
 							onMouseDown={(e) => e.preventDefault()}
 							onClick={() => t.run(exec)}
-							className="rounded border-0 bg-transparent px-2.5 py-0.5 text-xs text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+							className="rounded border-0 bg-transparent px-2.5 py-0.5 text-label text-fg-muted transition-colors hover:bg-surface hover:text-fg"
 						>
 							{t.label}
 						</button>
@@ -145,7 +145,7 @@ export function RichTextEditor({
 				</div>
 				<div
 					ref={ref}
-					className="prose prose-sm max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
+					className="prose prose-sm max-w-none px-4 py-3.5 text-small leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
 					style={{ minHeight: bodyMinHeight }}
 					contentEditable
 					suppressContentEditableWarning
@@ -155,8 +155,8 @@ export function RichTextEditor({
 					onPaste={onPaste}
 				/>
 			</div>
-			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
-			{isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
+			{description ? <span className="text-label text-fg-muted">{description}</span> : null}
+			{isInvalid && errorMessage ? <span className="text-label text-danger">{errorMessage}</span> : null}
 		</div>
 	)
 }

package/src/components/search-field.tsx

@@ -44,7 +44,7 @@ export const SearchField = ({ label, description, placeholder, ...props }: Searc
 			<RACInput
 				placeholder={placeholder}
 				className={
-					'h-12 w-full rounded-lg border border-border bg-surface pl-10 pr-10 text-sm text-fg outline-none transition-colors ' +
+					'h-12 w-full rounded-lg border border-border bg-surface pl-10 pr-10 text-small text-fg outline-none transition-colors ' +
 					'placeholder:text-fg-muted data-[hovered]:border-fg-subtle ' +
 					'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
 					'[&::-webkit-search-cancel-button]:hidden'
@@ -58,7 +58,7 @@ export const SearchField = ({ label, description, placeholder, ...props }: Searc
 			</RACButton>
 		</div>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}

package/src/components/select.tsx

@@ -36,7 +36,7 @@ const SelectTrigger = uic(RACButton, {
 	// Error → 2px danger ring driven off the RACSelect root's `data-invalid`.
 	baseClass:
 		'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-surface px-4 ' +
-		'text-sm text-fg outline-none transition-colors ' +
+		'text-small text-fg outline-none transition-colors ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
 		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
@@ -49,7 +49,7 @@ export const SelectItem = uic(ListBoxItem, {
 	// medium weight. We add a `surface-muted` focus background (gs highlights with
 	// weight only) so keyboard focus stays clearly visible on the cream content.
 	baseClass:
-		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-small text-fg outline-none ' +
 		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
@@ -84,11 +84,11 @@ export const Select = <T extends object>({
 		</ListBox>
 	)
 	const desc = description ? (
-		<Text slot="description" className="text-xs text-fg-muted">
+		<Text slot="description" className="text-label text-fg-muted">
 			{description}
 		</Text>
 	) : null
-	const err = <FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	const err = <FieldError className="text-label text-danger">{errorMessage}</FieldError>
 
 	return (
 		<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">

package/src/components/slider.tsx

@@ -37,7 +37,7 @@ export const Slider = <T extends number | number[]>({ label, hideValue, ...props
 								className="h-4 w-4 rounded-full border-2 border-fg bg-surface outline-none transition-transform data-[dragging]:scale-110 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
 							>
 								{hideValue ? null : (
-									<span className="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium tabular-nums text-fg">
+									<span className="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-label font-medium tabular-nums text-fg">
 										{state.getThumbValueLabel(i)}
 									</span>
 								)}

package/src/components/stat-stack.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+import { CountUp } from './count-up'
+
+/**
+ * StatStack — a "production compass" infographic: a fanned deck of coloured rounded
+ * bars, each showing an animated count + label (e.g. 55 Progress · 36 Done · 26
+ * Review). Bars cascade with a left inset that shrinks top→bottom and overlap
+ * vertically, later bars in front. The counts animate up via <CountUp>. Sits inside a
+ * dark data tile. Presentational only.
+ */
+export type StatStackTone = 'neutral' | 'green' | 'mint' | 'yellow' | 'pink' | 'blue'
+
+const TONE: Record<StatStackTone, string> = {
+	// Fixed decorative chip colours (they sit on a dark tile in both themes, so they
+	// do NOT theme-flip); dark text reads on all of them.
+	neutral: 'bg-[#eae7e0] text-fg',
+	green: 'bg-brand-green text-fg',
+	mint: 'bg-accent-mint text-fg',
+	yellow: 'bg-accent-yellow text-fg',
+	pink: 'bg-accent-pink text-fg',
+	blue: 'bg-accent-blue text-white',
+}
+
+export interface StatStackSegment {
+	value: number
+	label: ReactNode
+	tone: StatStackTone
+}
+
+export interface StatStackProps {
+	segments: StatStackSegment[]
+	className?: string
+}
+
+export function StatStack({ segments, className }: StatStackProps) {
+	const n = segments.length
+	return (
+		<div className={['flex flex-col', className].filter(Boolean).join(' ')}>
+			{segments.map((s, i) => (
+				<div
+					key={i}
+					className={[
+						'flex items-baseline gap-2 rounded-lg px-5 py-4 shadow-sm',
+						TONE[s.tone],
+					].join(' ')}
+					style={{
+						// Cascade: most-inset at the top, flush-left at the bottom; overlap the
+						// bar above; later bars sit in front.
+						marginLeft: `${(n - 1 - i) * 1.75}rem`,
+						marginRight: `${i * 1.25}rem`,
+						marginTop: i === 0 ? 0 : '-1rem',
+						zIndex: i + 1,
+					}}
+				>
+					<CountUp value={s.value} className="text-heading1 font-medium leading-none" />
+					<span className="text-heading3 font-medium leading-none">{s.label}</span>
+				</div>
+			))}
+		</div>
+	)
+}

package/src/components/switch.tsx

@@ -19,7 +19,7 @@ export type SwitchProps = Omit<RACSwitchProps, 'children'> & {
 export const Switch = ({ children, ...props }: SwitchProps) => (
 	<RACSwitch
 		{...props}
-		className="group flex cursor-pointer select-none items-center gap-3 text-sm text-fg data-[disabled]:cursor-not-allowed"
+		className="group flex cursor-pointer select-none items-center gap-3 text-small text-fg data-[disabled]:cursor-not-allowed"
 	>
 		{/* gs token map: off track #eceae1 → surface-muted · on track #0d0d0d → fg ·
 		    thumb #ffffff → surface. gs hovers the track at opacity .9 (not a border). */}

package/src/components/tabs.tsx

@@ -26,7 +26,7 @@ export const TabList = uic(RACTabList, {
 export const Tab = uic(RACTab, {
 	displayName: 'Tab',
 	baseClass:
-		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-sm font-medium text-fg-muted ' +
+		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-small font-medium text-fg-muted ' +
 		'outline-none transition-colors ' +
 		'data-[hovered]:text-fg ' +
 		'data-[selected]:border-brand-primary data-[selected]:text-fg ' +
@@ -36,5 +36,5 @@ export const Tab = uic(RACTab, {
 
 export const TabPanel = uic(RACTabPanel, {
 	displayName: 'TabPanel',
-	baseClass: 'py-4 text-sm text-fg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+	baseClass: 'py-4 text-small text-fg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
 }) as (props: TabPanelProps) => ReturnType<typeof RACTabPanel>

package/src/components/tag-group.tsx

@@ -26,7 +26,7 @@ export const TagGroup = ({ label, description, children, ...props }: TagGroupPro
 		{label ? <Label className="text-heading5 font-medium text-fg">{label}</Label> : null}
 		<TagList className="flex flex-wrap gap-2 outline-none">{children}</TagList>
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
@@ -40,7 +40,7 @@ export const Tag = ({ children, textValue, ...props }: RACTagProps) => (
 		// the tag's text — derive it from a string child for accessibility.
 		textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
 		className={
-			'inline-flex cursor-default select-none items-center gap-1.5 rounded-full border border-border bg-surface-card px-3 py-1 text-sm text-fg outline-none transition-colors ' +
+			'inline-flex cursor-default select-none items-center gap-1.5 rounded-full border border-border bg-surface-card px-3 py-1 text-small text-fg outline-none transition-colors ' +
 			'data-[hovered]:border-fg-subtle ' +
 			'data-[selected]:border-fg data-[selected]:bg-surface-muted ' +
 			'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +

package/src/components/task-approval-modal.tsx

@@ -79,8 +79,8 @@ export function TaskApprovalModal({
 			onOpenChange={onOpenChange}
 		>
 			<div className="flex flex-col gap-3">
-				<p className="text-sm text-fg-muted">{labels.body}</p>
-				<label htmlFor={noteId} className="text-sm font-medium text-fg">
+				<p className="text-small text-fg-muted">{labels.body}</p>
+				<label htmlFor={noteId} className="text-small font-medium text-fg">
 					{labels.noteLabel}
 				</label>
 				<textarea
@@ -90,10 +90,10 @@ export function TaskApprovalModal({
 					maxLength={10_000}
 					rows={3}
 					placeholder={labels.notePlaceholder}
-					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
+					className="w-full rounded-md border border-border bg-surface px-3 py-2 text-small text-fg outline-none transition-colors placeholder:text-fg-muted focus-visible:ring-2 focus-visible:ring-ring"
 				/>
 				{error ? (
-					<p data-testid="task-approval-error" role="alert" className="text-sm text-danger">
+					<p data-testid="task-approval-error" role="alert" className="text-small text-danger">
 						{error}
 					</p>
 				) : null}

package/src/components/text.tsx

@@ -27,15 +27,15 @@ export const Text = uic('span', {
 		size: {
 			micro: 'text-micro',
 			caption: 'text-caption',
-			label: 'text-compact',
+			label: 'text-label',
 			compact: 'text-compact',
+			small: 'text-small',
 			callout: 'text-callout',
 			body: 'text-body',
-			subtitle: 'text-heading4',
-			title: 'text-heading3',
-			headline: 'text-heading2',
+			subtitle: 'text-subtitle',
+			title: 'text-title',
+			headline: 'text-headline',
 			display: 'text-display',
-			'display-xl': 'text-display-xl',
 		},
 		// NC Fontina caps at medium (500) as the heaviest weight in the system, so
 		// `semibold` and `bold` are kept as API-compatible aliases that render

package/src/components/textarea.tsx

@@ -27,7 +27,7 @@ const StyledTextArea = uic(RACTextArea, {
 	// fg-subtle · focus #75e7b8 → brand-green · error → danger. min-h-[120px] is a
 	// control dimension (not a design token) — gs uses a literal 120px here too.
 	baseClass:
-		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface px-4 py-3 text-sm text-fg ' +
+		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface px-4 py-3 text-small text-fg ' +
 		'outline-none transition-colors duration-200 placeholder:text-fg-muted ' +
 		'data-[hovered]:border-fg-subtle ' +
 		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
@@ -49,13 +49,13 @@ export type TextareaProps = TextFieldProps & {
 
 export const Textarea = ({ label, description, errorMessage, placeholder, rows, ...props }: TextareaProps) => (
 	<TextField {...props} className="flex w-full flex-col gap-2">
-		<Label className="text-sm font-medium text-fg">{label}</Label>
+		<Label className="text-small font-medium text-fg">{label}</Label>
 		<StyledTextArea placeholder={placeholder} rows={rows} />
 		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
+			<Text slot="description" className="text-label text-fg-muted">
 				{description}
 			</Text>
 		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<FieldError className="text-label text-danger">{errorMessage}</FieldError>
 	</TextField>
 )

package/src/index.ts

@@ -52,8 +52,10 @@ export * from "./layout/persistent-page-shell";
 
 // --- product patterns (label-driven; no domain coupling) ---
 export * from "./components/brand-page-header";
+export * from "./components/count-up";
 export * from "./components/cta-pill";
 export * from "./components/feature-tile";
+export * from "./components/stat-stack";
 export * from "./components/icons";
 export * from "./components/subtle";
 export * from "./components/stats-card";

package/src/layout/persistent-page-shell.tsx

@@ -51,9 +51,9 @@ export type PersistentPageShellProps = {
 	title?: string
 }
 
-const defaultLoadingSlot = <div className="text-sm text-fg-muted">Loading…</div>
-const defaultEmptySlot = <div className="text-sm text-fg-muted">No content available.</div>
-const defaultErrorSlot = <div className="text-sm text-danger">Failed to load content.</div>
+const defaultLoadingSlot = <div className="text-small text-fg-muted">Loading…</div>
+const defaultEmptySlot = <div className="text-small text-fg-muted">No content available.</div>
+const defaultErrorSlot = <div className="text-small text-danger">Failed to load content.</div>
 
 const Header = uic('header', {
 	displayName: 'PersistentPageShell.Header',

package/src/layout/topbar.tsx

@@ -138,11 +138,11 @@ export const WorkspaceSwitcher = ({
 	...props
 }: WorkspaceSwitcherProps) => (
 	<RACComboBox {...props} items={workspaces} className="flex flex-col gap-1">
-		<Label className={hideLabel ? 'sr-only' : 'text-sm font-medium text-fg'}>{label}</Label>
+		<Label className={hideLabel ? 'sr-only' : 'text-small font-medium text-fg'}>{label}</Label>
 		<div className="flex items-center">
 			<RACInput
 				className={
-					'h-9 w-48 rounded-md border border-border bg-surface px-3 text-sm text-fg outline-none ' +
+					'h-9 w-48 rounded-md border border-border bg-surface px-3 text-small text-fg outline-none ' +
 					'data-[focused]:ring-2 data-[focused]:ring-ring'
 				}
 			/>
@@ -162,7 +162,7 @@ export const WorkspaceSwitcher = ({
 const WorkspaceSwitcherItem = uic(ListBoxItem, {
 	displayName: 'WorkspaceSwitcher.Item',
 	baseClass:
-		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm text-fg outline-none ' +
+		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-small text-fg outline-none ' +
 		'data-[focused]:bg-surface-muted data-[selected]:font-medium',
 }) as (props: ListBoxItemProps) => ReactNode
 
@@ -190,7 +190,7 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 		<RACButton
 			aria-label={triggerLabel}
 			className={
-				'flex h-9 items-center gap-2 rounded-md px-2 text-sm font-medium text-fg outline-none ' +
+				'flex h-9 items-center gap-2 rounded-md px-2 text-small font-medium text-fg outline-none ' +
 				'transition-colors hover:bg-surface-muted ' +
 				'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
 			}
@@ -208,7 +208,7 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 export const UserMenuItem = uic(RACMenuItem, {
 	displayName: 'UserMenu.Item',
 	baseClass:
-		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm text-fg outline-none ' +
+		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-small text-fg outline-none ' +
 		'data-[focused]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: MenuItemProps) => ReactNode