diff --git a/apps/docs/content/docs/components/actions/button.mdx b/apps/docs/content/docs/components/actions/button.mdx
index 80b83235..2cc22d61 100644
--- a/apps/docs/content/docs/components/actions/button.mdx
+++ b/apps/docs/content/docs/components/actions/button.mdx
@@ -20,8 +20,8 @@ reactAria: https://react-spectrum.adobe.com/react-aria/Button.html
 
 ## Size
 
-`medium` is the default size. Use `small` in dense toolbars, tables, and other compact interfaces.
-Keep related controls at the same size.
+`px40` is the default size. Use `px32` in dense toolbars, tables, and other compact interfaces. Keep
+related controls at the same size.
 
 <ExampleBlock src="button/sizes" title="Button: Size" />
 
diff --git a/apps/docs/content/docs/components/actions/icon-button.mdx b/apps/docs/content/docs/components/actions/icon-button.mdx
index 60501d84..ad9eba93 100644
--- a/apps/docs/content/docs/components/actions/icon-button.mdx
+++ b/apps/docs/content/docs/components/actions/icon-button.mdx
@@ -12,7 +12,7 @@ an item. Give every icon button an accessible name because it has no visible lab
 
 ## Size
 
-`medium` is the default. Use `small` for compact toolbars and dense row actions. Keep controls in a
+`px40` is the default. Use `px32` for compact toolbars and dense row actions. Keep controls in a
 group at the same size.
 
 <ExampleBlock src="icon-button/size" title="Icon Button: Size" />
diff --git a/apps/docs/content/docs/components/actions/icon-link.mdx b/apps/docs/content/docs/components/actions/icon-link.mdx
index de36d252..e013b30d 100644
--- a/apps/docs/content/docs/components/actions/icon-link.mdx
+++ b/apps/docs/content/docs/components/actions/icon-link.mdx
@@ -14,7 +14,7 @@ a navigation.
 
 ## Size
 
-`medium` is the default. Use `small` for compact toolbars and dense row actions. Keep controls in a
+`px40` is the default. Use `px32` for compact toolbars and dense row actions. Keep controls in a
 group at the same size.
 
 <ExampleBlock src="icon-link/size" title="Icon Link: Size" />
diff --git a/apps/docs/content/docs/components/feedback/loading-spinner.mdx b/apps/docs/content/docs/components/feedback/loading-spinner.mdx
index 65fb6534..6eb9c8a2 100644
--- a/apps/docs/content/docs/components/feedback/loading-spinner.mdx
+++ b/apps/docs/content/docs/components/feedback/loading-spinner.mdx
@@ -11,7 +11,7 @@ final content to replace it in place.
 
 ## Size
 
-`medium` is the default. Set `size` to match the surrounding control or content.
+`px24` is the default. Set `size` to match the surrounding control or content.
 
 <ExampleBlock src="loading-spinner/sizes" title="Loading Spinner: Sizes" />
 
diff --git a/apps/docs/content/docs/components/forms/checkbox-field.mdx b/apps/docs/content/docs/components/forms/checkbox-field.mdx
index 8f4bfd0a..61a613aa 100644
--- a/apps/docs/content/docs/components/forms/checkbox-field.mdx
+++ b/apps/docs/content/docs/components/forms/checkbox-field.mdx
@@ -34,8 +34,8 @@ option whose child options are only partly selected.
 
 ## Size
 
-Use `size` to change the checkbox control. It does not change the label typography. `medium` is the
-default. Use `small` in compact layouts and `large` where a larger control improves scanning.
+Use `size` to change the checkbox control. It does not change the label typography. `px20` is the
+default. Use `px16` in compact layouts and `px24` where a larger control improves scanning.
 
 <ExampleBlock src="checkbox-field/sizes" title="Checkbox Field: Size" />
 
diff --git a/apps/docs/content/docs/components/forms/combobox-field.mdx b/apps/docs/content/docs/components/forms/combobox-field.mdx
index 0df54d5d..e8d1a129 100644
--- a/apps/docs/content/docs/components/forms/combobox-field.mdx
+++ b/apps/docs/content/docs/components/forms/combobox-field.mdx
@@ -53,7 +53,7 @@ Use `ComboboxSection` to group related static options.
 
 ## Size
 
-Use `size` to set the control height and typography. Use `small` in compact layouts. `medium` is the
+Use `size` to set the control height and typography. Use `px32` in compact layouts. `px40` is the
 default.
 
 <ExampleBlock src="combobox-field/sizes" title="Combobox Field: Size" />
diff --git a/apps/docs/content/docs/components/forms/select-field.mdx b/apps/docs/content/docs/components/forms/select-field.mdx
index a59c35b5..ea805371 100644
--- a/apps/docs/content/docs/components/forms/select-field.mdx
+++ b/apps/docs/content/docs/components/forms/select-field.mdx
@@ -66,7 +66,7 @@ and can't change the value from the trigger, until pending ends.
 
 ## Size
 
-Use `size` to set the control height and typography. Use `small` in compact layouts. `medium` is the
+Use `size` to set the control height and typography. Use `px32` in compact layouts. `px40` is the
 default.
 
 <ExampleBlock src="select-field/sizes" title="Select Field: Size" />
diff --git a/apps/docs/content/docs/components/forms/switch-field.mdx b/apps/docs/content/docs/components/forms/switch-field.mdx
index 6941cab2..bfda66c0 100644
--- a/apps/docs/content/docs/components/forms/switch-field.mdx
+++ b/apps/docs/content/docs/components/forms/switch-field.mdx
@@ -36,7 +36,7 @@ saving.
 
 ## Size
 
-Use `size` to change the switch control. It does not change the label typography. `medium` is the
+Use `size` to change the switch control. It does not change the label typography. `px20` is the
 default.
 
 <ExampleBlock src="switch-field/sizes" title="Switch Field: Size" />
diff --git a/apps/docs/content/docs/components/forms/text-input-field.mdx b/apps/docs/content/docs/components/forms/text-input-field.mdx
index c1218692..e282d32a 100644
--- a/apps/docs/content/docs/components/forms/text-input-field.mdx
+++ b/apps/docs/content/docs/components/forms/text-input-field.mdx
@@ -55,7 +55,7 @@ keyboard behaviour.
 
 ## Size
 
-Use `size` to set the input height and typography. Use `small` in compact layouts. `medium` is the
+Use `size` to set the input height and typography. Use `px32` in compact layouts. `px40` is the
 default. The HTML numeric `size` attribute is unavailable because `size` is the Luke UI variant.
 
 <ExampleBlock src="text-input-field/sizes" title="Text Input Field: Size" />
diff --git a/apps/docs/content/docs/components/layout/container.mdx b/apps/docs/content/docs/components/layout/container.mdx
index 3f8c2471..6b741fcb 100644
--- a/apps/docs/content/docs/components/layout/container.mdx
+++ b/apps/docs/content/docs/components/layout/container.mdx
@@ -4,8 +4,8 @@ description: Constrain content and establish a local size container.
 source: packages/@luke-ui/react/src/exports/container.ts
 ---
 
-`Container` fills its available inline size up to `maxInlineSize` and centres itself. Pass a `ct`
-value for a fixed maximum, or a CSS length. Pass `marginInline` to change the centring. Read
+`Container` fills its available inline size up to `maxInlineSize` and centres itself. Pass a `px`
+token for a fixed maximum, or a CSS length. Pass `marginInline` to change the centring. Read
 [Layout](/docs/layout#choose-a-layout-component) to choose a layout component.
 
 <ExampleBlock src="container/basic" title="Container: Basic" />
@@ -16,7 +16,7 @@ A traditional container usually only constrains and centres content. Luke UI's `
 establishes a local responsive query boundary.
 
 Luke UI responsive values inside the Container resolve against its content box rather than the
-document root. A `ct672` Container therefore never reaches `bp768`. `paddingInline` reduces the
+document root. A `px672` Container therefore never reaches `bp768`. `paddingInline` reduces the
 content-box width, so it can also change where responsive styles switch.
 
 Use Container when descendants should respond to the available content area rather than the document
diff --git a/apps/docs/content/docs/components/primitives/select.mdx b/apps/docs/content/docs/components/primitives/select.mdx
index 21ca02be..cb652d2a 100644
--- a/apps/docs/content/docs/components/primitives/select.mdx
+++ b/apps/docs/content/docs/components/primitives/select.mdx
@@ -44,8 +44,8 @@ function.
 
 ## Size
 
-Set `size` on `SelectRoot`, and the trigger, indicator, and items follow. `medium` is the default.
-Use `small` in compact layouts.
+Set `size` on `SelectRoot`, and the trigger, indicator, and items follow. `px40` is the default. Use
+`px32` in compact layouts.
 
 ## Pending
 
diff --git a/apps/docs/content/docs/components/primitives/text-input.mdx b/apps/docs/content/docs/components/primitives/text-input.mdx
index 13fc3b9f..fd889129 100644
--- a/apps/docs/content/docs/components/primitives/text-input.mdx
+++ b/apps/docs/content/docs/components/primitives/text-input.mdx
@@ -85,9 +85,9 @@ receives the change event, while the root's `onChange` receives the value.
 
 ## Size
 
-`medium` is the default. Use `small` in compact layouts. `size` on `TextInputRoot` sets the default
-for the parts inside it. A `TextInput` or `TextInputControl` with its own `size` overrides the
-root's. Inside a control, the control sets the size, and the input, prefix, and suffix follow it.
+`px40` is the default. Use `px32` in compact layouts. `size` on `TextInputRoot` sets the default for
+the parts inside it. A `TextInput` or `TextInputControl` with its own `size` overrides the root's.
+Inside a control, the control sets the size, and the input, prefix, and suffix follow it.
 
 The control also sets the icon size for everything inside it, so an `Icon` in a prefix or suffix
 scales with the control without a `size` of its own.
diff --git a/apps/docs/content/docs/docs/iconography.mdx b/apps/docs/content/docs/docs/iconography.mdx
index a91eac13..2860ca85 100644
--- a/apps/docs/content/docs/docs/iconography.mdx
+++ b/apps/docs/content/docs/docs/iconography.mdx
@@ -19,12 +19,12 @@ API.
 
 ## Size
 
-Set `size` to `xsmall`, `small`, `medium`, or `large`. Each size is a theme token, not a pixel
-value. A custom theme can give each size a different value.
+Set `size` to a curated literal key: `px16`, `px20`, `px24`, or `px32`. Each key is that many CSS
+pixels at a 16px root, emitted as `rem`.
 
 <ExampleBlock src="icon/sizes" title="Icon: Sizes" />
 
-The default size is `medium`.
+The default size is `px24`.
 
 To give a group of icons the same size, put an `IconSizeProvider` around them. An icon that has its
 own `size` prop keeps that size.
diff --git a/apps/docs/content/docs/docs/styling.mdx b/apps/docs/content/docs/docs/styling.mdx
index 798dd316..3d7cce5e 100644
--- a/apps/docs/content/docs/docs/styling.mdx
+++ b/apps/docs/content/docs/docs/styling.mdx
@@ -84,7 +84,7 @@ own:
 ```tsx
 import { textInputRecipe } from '@luke-ui/react/primitives/text-input';
 
-<input aria-label="Example input" className={textInputRecipe({ size: 'medium' })} />;
+<input aria-label="Example input" className={textInputRecipe({ size: 'px40' })} />;
 ```
 
 Do not import a recipe to restyle a Luke UI component from the outside. Use the component's props
diff --git a/apps/docs/src/components/code-block/code-block.css.ts b/apps/docs/src/components/code-block/code-block.css.ts
index f7c8743d..1afc0044 100644
--- a/apps/docs/src/components/code-block/code-block.css.ts
+++ b/apps/docs/src/components/code-block/code-block.css.ts
@@ -57,7 +57,7 @@ export const header = style({
 			borderBlockEndWidth: '1px',
 			display: 'flex',
 			gap: vars.space.sp8,
-			minBlockSize: vars.controlSize.medium,
+			minBlockSize: vars.controlSize.px40,
 			paddingBlock: vars.space.sp4,
 			paddingInline: vars.space.sp12,
 		},
@@ -100,7 +100,7 @@ export const overlayActions = style({
 	'@layer': {
 		components: {
 			backgroundColor: vars.color.surface.subdued,
-			insetBlockStart: `calc(${vars.space.sp12} + (${vars.font.label.lineHeight} / 2) - (${vars.controlSize.small} / 2))`,
+			insetBlockStart: `calc(${vars.space.sp12} + (${vars.font.label.lineHeight} / 2) - (${vars.controlSize.px32} / 2))`,
 			insetInlineEnd: vars.space.sp8,
 			position: 'absolute',
 			zIndex: 1,
diff --git a/apps/docs/src/components/code-block/code-block.tsx b/apps/docs/src/components/code-block/code-block.tsx
index dd5520f1..cff54e1b 100644
--- a/apps/docs/src/components/code-block/code-block.tsx
+++ b/apps/docs/src/components/code-block/code-block.tsx
@@ -107,7 +107,7 @@ export function CodeBlock({
 			icon={copyStatus === 'copied' ? 'check' : 'copy'}
 			onPress={handleCopy}
 			prominence="low"
-			size="small"
+			size="px32"
 			tone="neutral"
 		/>
 	) : null;
diff --git a/apps/docs/src/components/component-props-table.tsx b/apps/docs/src/components/component-props-table.tsx
index d5d62903..4e6347e8 100644
--- a/apps/docs/src/components/component-props-table.tsx
+++ b/apps/docs/src/components/component-props-table.tsx
@@ -133,7 +133,7 @@ function PropGroup({
 							aria-hidden
 							className={disclosureStyles.chevronEnd}
 							name="chevronRight"
-							size="xsmall"
+							size="px16"
 						/>
 						<CellText fontWeight="emphasis">{group.name}</CellText>
 					</Cluster>
diff --git a/apps/docs/src/components/docs-article/docs-pager.tsx b/apps/docs/src/components/docs-article/docs-pager.tsx
index 4b19cf02..6e5c53df 100644
--- a/apps/docs/src/components/docs-article/docs-pager.tsx
+++ b/apps/docs/src/components/docs-article/docs-pager.tsx
@@ -120,7 +120,7 @@ function PagerLink({ direction, page }: { direction: PagerDirection; page: Item
 function PagerTitle({ direction, name }: { direction: PagerDirection; name: ReactNode }) {
 	const chevron = (
 		<LockupRail>
-			<Icon className={styles.pagerIcon} name={pagerDirection[direction].chevron} size="xsmall" />
+			<Icon className={styles.pagerIcon} name={pagerDirection[direction].chevron} size="px16" />
 		</LockupRail>
 	);
 
diff --git a/apps/docs/src/components/docs-article/docs-toc.tsx b/apps/docs/src/components/docs-article/docs-toc.tsx
index fa63d5f5..756cafe4 100644
--- a/apps/docs/src/components/docs-article/docs-toc.tsx
+++ b/apps/docs/src/components/docs-article/docs-toc.tsx
@@ -78,7 +78,7 @@ export function DocsTocBar({ toc }: { toc: Array<TOCItemType> }) {
 		<details className={styles.tocBar} ref={detailsRef}>
 			<summary className={styles.tocSummary}>
 				{TOC_LABEL}
-				<Icon className={styles.tocSummaryIcon} name="chevronDown" size="xsmall" />
+				<Icon className={styles.tocSummaryIcon} name="chevronDown" size="px16" />
 			</summary>
 			<nav aria-label={TOC_LABEL} className={styles.tocBarPanel}>
 				<Box paddingBlock="sp8">
diff --git a/apps/docs/src/components/docs-article/mdx-elements.tsx b/apps/docs/src/components/docs-article/mdx-elements.tsx
index a557939e..06e21500 100644
--- a/apps/docs/src/components/docs-article/mdx-elements.tsx
+++ b/apps/docs/src/components/docs-article/mdx-elements.tsx
@@ -139,7 +139,7 @@ function CopyAnchorButton({ id }: { id: string }) {
 				icon={copied ? 'check' : <LinkIcon />}
 				onPress={onCopy}
 				prominence="low"
-				size="small"
+				size="px32"
 			/>
 			<VisuallyHidden aria-live="polite" role="status">
 				{copied ? 'Copied' : ''}
diff --git a/apps/docs/src/components/docs-site-nav.tsx b/apps/docs/src/components/docs-site-nav.tsx
index b6301d8b..a4e907c3 100644
--- a/apps/docs/src/components/docs-site-nav.tsx
+++ b/apps/docs/src/components/docs-site-nav.tsx
@@ -35,7 +35,7 @@ export function DocsSiteNav({ tree }: { tree: Root }) {
 		<SiteNav className={styles.header} hasSidebarNavigation>
 			<DialogTrigger isOpen={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
 				{/* No bars/menu glyph in the Luke UI set; match the Theme labelled control. */}
-				<Button className={styles.mobileTrigger} prominence="low" size="small">
+				<Button className={styles.mobileTrigger} prominence="low" size="px32">
 					Menu
 				</Button>
 				<ModalOverlay className={styles.drawerOverlay} isDismissable>
@@ -51,7 +51,7 @@ export function DocsSiteNav({ tree }: { tree: Root }) {
 											aria-label="Close docs navigation"
 											icon="close"
 											onPress={close}
-											size="small"
+											size="px32"
 										/>
 									</Box>
 									<Stack
diff --git a/apps/docs/src/components/example-block.tsx b/apps/docs/src/components/example-block.tsx
index 82a84f12..a85c11fb 100644
--- a/apps/docs/src/components/example-block.tsx
+++ b/apps/docs/src/components/example-block.tsx
@@ -155,7 +155,7 @@ function OpenInPlayground({ hash }: { hash: string }) {
 			appearance="button"
 			hash={hash}
 			prominence="low"
-			size="small"
+			size="px32"
 			startContent={<Icon name="externalLink" />}
 			target="_blank"
 			to="/playground"
@@ -169,12 +169,7 @@ function ExampleLoadingActions() {
 	return (
 		<Box alignItems="center" aria-hidden display="flex" flexShrink="0" gap="sp4" inert>
 			<LoadingSkeleton radius="control">
-				<Button
-					isDisabled
-					prominence="low"
-					size="small"
-					startContent={<Icon name="externalLink" />}
-				>
+				<Button isDisabled prominence="low" size="px32" startContent={<Icon name="externalLink" />}>
 					Open in playground
 				</Button>
 			</LoadingSkeleton>
diff --git a/apps/docs/src/components/example-code-preview.tsx b/apps/docs/src/components/example-code-preview.tsx
index a6cb9af0..46394ebc 100644
--- a/apps/docs/src/components/example-code-preview.tsx
+++ b/apps/docs/src/components/example-code-preview.tsx
@@ -48,7 +48,7 @@ export function ExampleCodePreview({
 					<Button
 						aria-expanded={isExpanded}
 						onPress={() => setIsExpanded((prev) => !prev)}
-						size="small"
+						size="px32"
 					>
 						{isExpanded ? 'Collapse code' : 'Expand code'}
 					</Button>
diff --git a/apps/docs/src/components/icon-gallery.tsx b/apps/docs/src/components/icon-gallery.tsx
index 4557b541..03626f38 100644
--- a/apps/docs/src/components/icon-gallery.tsx
+++ b/apps/docs/src/components/icon-gallery.tsx
@@ -21,10 +21,10 @@ import * as referenceStyles from './reference-table.css.js';
 type GalleryIconSize = NonNullable<IconProps['size']>;
 
 const SIZE_OPTIONS = [
-	{ label: 'XS', value: 'xsmall' },
-	{ label: 'S', value: 'small' },
-	{ label: 'M', value: 'medium' },
-	{ label: 'L', value: 'large' },
+	{ label: 'px16', value: 'px16' },
+	{ label: 'px20', value: 'px20' },
+	{ label: 'px24', value: 'px24' },
+	{ label: 'px32', value: 'px32' },
 ] as const satisfies ReadonlyArray<{ label: string; value: GalleryIconSize }>;
 
 /** How long a copy button shows its "Copied"/error feedback before reverting. */
@@ -42,7 +42,7 @@ interface CopyStatus {
 /** Searchable index of the first-party icon set, sized at the token you'll ship it at. */
 export function IconGallery(): JSX.Element {
 	const [filter, setFilter] = useState('');
-	const [previewSize, setPreviewSize] = useState<GalleryIconSize>('medium');
+	const [previewSize, setPreviewSize] = useState<GalleryIconSize>('px24');
 	const [copyState, dispatchCopy] = useReducer(copyReducer, {
 		announcement: '',
 		status: null,
@@ -115,8 +115,8 @@ export function IconGallery(): JSX.Element {
 								inputRef={inputRef}
 								onChange={setFilter}
 								placeholder="Filter by name"
-								prefix={<Icon name="search" size="small" />}
-								size="small"
+								prefix={<Icon name="search" size="px20" />}
+								size="px32"
 								value={filter}
 							/>
 						</Box>
@@ -330,7 +330,7 @@ function IconGalleryEmptyState({ onClear, query }: IconGalleryEmptyStateProps) {
 			<Text color="secondary" elementType="p" textAlign="center" typography="caption">
 				No icon matches &quot;{query}&quot;
 			</Text>
-			<Button onPress={onClear} size="small">
+			<Button onPress={onClear} size="px32">
 				Clear filter
 			</Button>
 		</Stack>
diff --git a/apps/docs/src/components/motion-tokens.tsx b/apps/docs/src/components/motion-tokens.tsx
index dcf1e1a6..f29f0613 100644
--- a/apps/docs/src/components/motion-tokens.tsx
+++ b/apps/docs/src/components/motion-tokens.tsx
@@ -106,7 +106,7 @@ function MotionSampleTable({
 									setPlayGeneration((generation) => generation + 1);
 								}
 							}}
-							size="small"
+							size="px16"
 						/>
 					}
 					label={label}
diff --git a/apps/docs/src/components/not-found.tsx b/apps/docs/src/components/not-found.tsx
index a3e34471..25c5b47d 100644
--- a/apps/docs/src/components/not-found.tsx
+++ b/apps/docs/src/components/not-found.tsx
@@ -15,7 +15,7 @@ export function NotFound() {
 			<Container
 				elementType="main"
 				flexGrow="1"
-				maxInlineSize="ct1152"
+				maxInlineSize="px1152"
 				paddingBlock={{
 					initial: 'sp64',
 					bp768: 'sp96',
diff --git a/apps/docs/src/components/page-actions.tsx b/apps/docs/src/components/page-actions.tsx
index 1652a4f4..acea8d73 100644
--- a/apps/docs/src/components/page-actions.tsx
+++ b/apps/docs/src/components/page-actions.tsx
@@ -77,7 +77,7 @@ function PageActionLink({
 			href={href}
 			prominence="low"
 			rel="noreferrer noopener"
-			size="small"
+			size="px32"
 			startContent={icon ?? (iconName ? <Icon name={iconName} /> : null)}
 			target="_blank"
 		>
@@ -105,7 +105,7 @@ function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
 		<Button
 			onPress={onCopy}
 			prominence="low"
-			size="small"
+			size="px32"
 			startContent={<Icon name={copied ? 'check' : 'copy'} />}
 			tone="neutral"
 		>
diff --git a/apps/docs/src/components/playground/editor-skeleton.tsx b/apps/docs/src/components/playground/editor-skeleton.tsx
index 06479155..82858d65 100644
--- a/apps/docs/src/components/playground/editor-skeleton.tsx
+++ b/apps/docs/src/components/playground/editor-skeleton.tsx
@@ -94,7 +94,7 @@ export function LoadingPill({ label }: { label: string }) {
 	return (
 		<Lockup className={styles.loadingPill} gap="sp8">
 			<LockupRail>
-				<LoadingSpinner aria-hidden size="small" />
+				<LoadingSpinner aria-hidden size="px20" />
 			</LockupRail>
 			<LockupBody>{label}</LockupBody>
 		</Lockup>
diff --git a/apps/docs/src/components/playground/editor.tsx b/apps/docs/src/components/playground/editor.tsx
index 7f343297..2b67b582 100644
--- a/apps/docs/src/components/playground/editor.tsx
+++ b/apps/docs/src/components/playground/editor.tsx
@@ -54,7 +54,7 @@ export default function PlaygroundEditor({
 	return (
 		<Stack blockSize="100%" minBlockSize={0}>
 			<PlaygroundPaneToolbar>
-				<Button isPending={isFormatting} onPress={() => void handleFormat()} size="small">
+				<Button isPending={isFormatting} onPress={() => void handleFormat()} size="px32">
 					Format
 				</Button>
 			</PlaygroundPaneToolbar>
diff --git a/apps/docs/src/components/playground/icon-toggle-button-group.tsx b/apps/docs/src/components/playground/icon-toggle-button-group.tsx
index 9745590a..6ea367c3 100644
--- a/apps/docs/src/components/playground/icon-toggle-button-group.tsx
+++ b/apps/docs/src/components/playground/icon-toggle-button-group.tsx
@@ -65,7 +65,7 @@ export function IconToggleButtonGroup<Value extends string>({
 					key={optionValue}
 					render={renderToggleButton}
 				>
-					<Icon name={icon} size="xsmall" />
+					<Icon name={icon} size="px16" />
 				</ToggleButton>
 			))}
 		</Cluster>
@@ -115,7 +115,7 @@ export function TextToggleButtonGroup<Value extends string>({
 function toggleButtonClassName() {
 	return buttonRecipe({
 		prominence: 'low',
-		size: 'small',
+		size: 'px32',
 		tone: 'neutral',
 	});
 }
diff --git a/apps/docs/src/components/playground/playground.css.ts b/apps/docs/src/components/playground/playground.css.ts
index 41259c0c..530b58bb 100644
--- a/apps/docs/src/components/playground/playground.css.ts
+++ b/apps/docs/src/components/playground/playground.css.ts
@@ -131,7 +131,7 @@ export const paneToolbar = style({
 		components: {
 			backgroundColor: vars.color.surface.base,
 			borderBlockEnd: `1px solid ${vars.color.border.decorative}`,
-			minBlockSize: `calc(${vars.controlSize.small} + ${vars.space.sp8} * 2 + 1px)`,
+			minBlockSize: `calc(${vars.controlSize.px32} + ${vars.space.sp8} * 2 + 1px)`,
 			paddingBlock: vars.space.sp8,
 			paddingInline: vars.space.sp8,
 			'@container': {
diff --git a/apps/docs/src/components/playground/preview-toolbar.tsx b/apps/docs/src/components/playground/preview-toolbar.tsx
index 7ffe9847..8b85ed58 100644
--- a/apps/docs/src/components/playground/preview-toolbar.tsx
+++ b/apps/docs/src/components/playground/preview-toolbar.tsx
@@ -34,7 +34,7 @@ export function PreviewToolbar({
 				icon={isFullscreen ? 'minimize' : 'expand'}
 				onPress={() => onFullscreenChange((prev) => !prev)}
 				prominence="low"
-				size="small"
+				size="px32"
 			/>
 		</PlaygroundPaneToolbar>
 	);
diff --git a/apps/docs/src/components/search-dialog.tsx b/apps/docs/src/components/search-dialog.tsx
index b2364c78..aca4f25c 100644
--- a/apps/docs/src/components/search-dialog.tsx
+++ b/apps/docs/src/components/search-dialog.tsx
@@ -115,7 +115,7 @@ export function DocsSearchDialog({
 									inputClassName={styles.input}
 									placeholder="Search documentation"
 									prefix={<Icon name="search" />}
-									size="small"
+									size="px32"
 									type="search"
 								/>
 							</LockupBody>
@@ -125,7 +125,7 @@ export function DocsSearchDialog({
 									className={styles.close}
 									onPress={close}
 									prominence="low"
-									size="small"
+									size="px32"
 								>
 									<Kbd>Esc</Kbd>
 								</Button>
@@ -236,7 +236,7 @@ function ResultBody({ result }: { result: SortedResult }) {
 						{result.breadcrumbs.map((part, index) => (
 							<span key={index}>
 								{index > 0 ? (
-									<Icon className={styles.breadcrumbChevron} name="chevronRight" size="xsmall" />
+									<Icon className={styles.breadcrumbChevron} name="chevronRight" size="px16" />
 								) : null}
 								{plainText(part)}
 							</span>
diff --git a/apps/docs/src/components/search.tsx b/apps/docs/src/components/search.tsx
index 0567f5e0..8dae6098 100644
--- a/apps/docs/src/components/search.tsx
+++ b/apps/docs/src/components/search.tsx
@@ -185,7 +185,7 @@ export function DocsSearchTrigger({ isCompact = false }: { isCompact?: boolean }
 				ref={(node) => {
 					compactTriggerRef.current = node;
 				}}
-				size="small"
+				size="px32"
 			/>
 		);
 	}
@@ -217,7 +217,7 @@ function WideSearchTrigger({ context }: { context: SearchContextValue }) {
 						isBlock
 						onPress={() => openSearch('wide')}
 						prominence="low"
-						size="small"
+						size="px32"
 					>
 						<Lockup
 							className={styles.triggerLockup}
diff --git a/apps/docs/src/components/site-nav.tsx b/apps/docs/src/components/site-nav.tsx
index 57bce3af..35c08e0d 100644
--- a/apps/docs/src/components/site-nav.tsx
+++ b/apps/docs/src/components/site-nav.tsx
@@ -97,7 +97,7 @@ function SiteWordmark() {
 function AppearancePopover() {
 	return (
 		<DialogTrigger>
-			<Button className={styles.mobileThemeTrigger} prominence="low" size="small">
+			<Button className={styles.mobileThemeTrigger} prominence="low" size="px32">
 				Theme
 			</Button>
 			<Popover className={styles.appearancePopover} placement="bottom end">
@@ -117,7 +117,7 @@ function RepositoryLink() {
 			icon={<GithubMark />}
 			prominence="low"
 			rel="noreferrer noopener"
-			size="small"
+			size="px32"
 			target="_blank"
 		/>
 	);
diff --git a/apps/docs/src/components/token-reference-parts.tsx b/apps/docs/src/components/token-reference-parts.tsx
index 0c9c3c2d..de358d71 100644
--- a/apps/docs/src/components/token-reference-parts.tsx
+++ b/apps/docs/src/components/token-reference-parts.tsx
@@ -71,7 +71,7 @@ function TokenCopyButton({ token }: { token: ThemeToken }) {
 				icon={status?.state === 'copied' ? 'check' : 'copy'}
 				onPress={() => void copy('token', text)}
 				prominence="low"
-				size="small"
+				size="px32"
 				tone="neutral"
 			/>
 			<VisuallyHidden aria-live="polite" elementType="span">
diff --git a/apps/docs/src/components/token-scales.tsx b/apps/docs/src/components/token-scales.tsx
index b333d7ad..af6c8e1d 100644
--- a/apps/docs/src/components/token-scales.tsx
+++ b/apps/docs/src/components/token-scales.tsx
@@ -119,7 +119,7 @@ export function DepthAndFinishTokens() {
 						sample={
 							<Box
 								backgroundColor="neutral.solid.rest"
-								blockSize={vars.controlSize.medium}
+								blockSize={vars.controlSize.px40}
 								borderRadius="control"
 								inlineSize={DEPTH_FINISH_SAMPLE_SIZE}
 								style={{ backgroundImage: `var(${token.variable})` }}
@@ -191,7 +191,7 @@ function SampleControl({ label, opacity }: { label: string; opacity?: string })
 		<Box
 			alignItems="center"
 			backgroundColor="neutral.subtle.rest"
-			blockSize={vars.controlSize.small}
+			blockSize={vars.controlSize.px32}
 			borderColor="control"
 			borderRadius="control"
 			borderStyle="solid"
diff --git a/apps/docs/src/components/type-popover.tsx b/apps/docs/src/components/type-popover.tsx
index 39e9b9f6..aa784def 100644
--- a/apps/docs/src/components/type-popover.tsx
+++ b/apps/docs/src/components/type-popover.tsx
@@ -58,7 +58,7 @@ function DefinitionBody({
 					<Text color="secondary" typography="caption">
 						{load.message}
 					</Text>
-					<Button onPress={ensureLoaded} prominence="low" size="small">
+					<Button onPress={ensureLoaded} prominence="low" size="px32">
 						Retry
 					</Button>
 				</Stack>
diff --git a/apps/docs/src/components/typography-tokens.tsx b/apps/docs/src/components/typography-tokens.tsx
index d8907fab..2e5141bf 100644
--- a/apps/docs/src/components/typography-tokens.tsx
+++ b/apps/docs/src/components/typography-tokens.tsx
@@ -195,7 +195,7 @@ function TypeValueRow({ onCopy, status, token }: TypeValueRowProps) {
 							onCopy(token, text);
 						}}
 						prominence="low"
-						size="small"
+						size="px32"
 						tone="neutral"
 					/>
 				</Cluster>
diff --git a/apps/docs/src/examples/aspect-ratio/basic.tsx b/apps/docs/src/examples/aspect-ratio/basic.tsx
index fa07064d..99e956bd 100644
--- a/apps/docs/src/examples/aspect-ratio/basic.tsx
+++ b/apps/docs/src/examples/aspect-ratio/basic.tsx
@@ -4,7 +4,7 @@ import { vars } from '@luke-ui/react/theme';
 
 export default () => {
 	return (
-		<Container maxInlineSize="ct672">
+		<Container maxInlineSize="px672">
 			<AspectRatio ratio="16 / 9">
 				<iframe
 					src="https://www.youtube.com/embed/K5uS5DIKQbU"
diff --git a/apps/docs/src/examples/aspect-ratio/semantic-element.tsx b/apps/docs/src/examples/aspect-ratio/semantic-element.tsx
index b1647921..555b8e2a 100644
--- a/apps/docs/src/examples/aspect-ratio/semantic-element.tsx
+++ b/apps/docs/src/examples/aspect-ratio/semantic-element.tsx
@@ -4,7 +4,7 @@ import { vars } from '@luke-ui/react/theme';
 
 export default () => {
 	return (
-		<Container maxInlineSize="ct672">
+		<Container maxInlineSize="px672">
 			<AspectRatio elementType="figure" ratio="4 / 3">
 				<img
 					alt="Looking up between tall canyon walls at a strip of blue sky"
diff --git a/apps/docs/src/examples/button/sizes.tsx b/apps/docs/src/examples/button/sizes.tsx
index bc043d9f..413f7b0f 100644
--- a/apps/docs/src/examples/button/sizes.tsx
+++ b/apps/docs/src/examples/button/sizes.tsx
@@ -4,11 +4,11 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
-				<Button size="small">Save changes</Button>
+			<ComparisonItem label="px32">
+				<Button size="px32">Save changes</Button>
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<Button size="medium">Save changes</Button>
+			<ComparisonItem label="px40">
+				<Button size="px40">Save changes</Button>
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/checkbox-field/sizes.tsx b/apps/docs/src/examples/checkbox-field/sizes.tsx
index 5c7a55e6..60ec8ea3 100644
--- a/apps/docs/src/examples/checkbox-field/sizes.tsx
+++ b/apps/docs/src/examples/checkbox-field/sizes.tsx
@@ -4,14 +4,14 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
-				<CheckboxField defaultSelected label="Example checkbox" size="small" />
+			<ComparisonItem label="px16">
+				<CheckboxField defaultSelected label="Example checkbox" size="px16" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<CheckboxField defaultSelected label="Example checkbox" size="medium" />
+			<ComparisonItem label="px20">
+				<CheckboxField defaultSelected label="Example checkbox" size="px20" />
 			</ComparisonItem>
-			<ComparisonItem label="Large">
-				<CheckboxField defaultSelected label="Example checkbox" size="large" />
+			<ComparisonItem label="px24">
+				<CheckboxField defaultSelected label="Example checkbox" size="px24" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/combobox-field/sizes.tsx b/apps/docs/src/examples/combobox-field/sizes.tsx
index ec247e58..a3245613 100644
--- a/apps/docs/src/examples/combobox-field/sizes.tsx
+++ b/apps/docs/src/examples/combobox-field/sizes.tsx
@@ -11,24 +11,24 @@ const options: Array<Option> = [
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
+			<ComparisonItem label="px32">
 				<ComboboxField
 					defaultItems={options}
 					label="Example field"
 					name="example"
 					placeholder="Choose an option"
-					size="small"
+					size="px32"
 				>
 					{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
 				</ComboboxField>
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
+			<ComparisonItem label="px40">
 				<ComboboxField
 					defaultItems={options}
 					label="Example field"
 					name="example"
 					placeholder="Choose an option"
-					size="medium"
+					size="px40"
 				>
 					{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
 				</ComboboxField>
diff --git a/apps/docs/src/examples/container/basic.tsx b/apps/docs/src/examples/container/basic.tsx
index c9a7ebf8..d59a2db6 100644
--- a/apps/docs/src/examples/container/basic.tsx
+++ b/apps/docs/src/examples/container/basic.tsx
@@ -4,7 +4,7 @@ import { Container } from '@luke-ui/react/container';
 
 export default () => {
 	return (
-		<Container maxInlineSize="ct672" paddingInline="sp16">
+		<Container maxInlineSize="px672" paddingInline="sp16">
 			<Box
 				backgroundColor="surface.subdued"
 				borderColor="decorative"
diff --git a/apps/docs/src/examples/container/semantic-element.tsx b/apps/docs/src/examples/container/semantic-element.tsx
index c3aaa27f..17bb2673 100644
--- a/apps/docs/src/examples/container/semantic-element.tsx
+++ b/apps/docs/src/examples/container/semantic-element.tsx
@@ -2,7 +2,7 @@ import { Container } from '@luke-ui/react/container';
 
 export default () => {
 	return (
-		<Container elementType="main" maxInlineSize="ct672" paddingInline="sp16">
+		<Container elementType="main" maxInlineSize="px672" paddingInline="sp16">
 			Main page content
 		</Container>
 	);
diff --git a/apps/docs/src/examples/icon-button/size.tsx b/apps/docs/src/examples/icon-button/size.tsx
index 91811d76..bf84bbbe 100644
--- a/apps/docs/src/examples/icon-button/size.tsx
+++ b/apps/docs/src/examples/icon-button/size.tsx
@@ -4,11 +4,11 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
-				<IconButton aria-label="Example action" icon="search" size="small" />
+			<ComparisonItem label="px32">
+				<IconButton aria-label="Example action" icon="search" size="px32" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<IconButton aria-label="Example action" icon="search" size="medium" />
+			<ComparisonItem label="px40">
+				<IconButton aria-label="Example action" icon="search" size="px40" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/icon-link/size.tsx b/apps/docs/src/examples/icon-link/size.tsx
index 044daf35..73eab562 100644
--- a/apps/docs/src/examples/icon-link/size.tsx
+++ b/apps/docs/src/examples/icon-link/size.tsx
@@ -4,11 +4,11 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
-				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="small" />
+			<ComparisonItem label="px32">
+				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="px32" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="medium" />
+			<ComparisonItem label="px40">
+				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="px40" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/icon/custom.tsx b/apps/docs/src/examples/icon/custom.tsx
index d1edcee6..40b2002b 100644
--- a/apps/docs/src/examples/icon/custom.tsx
+++ b/apps/docs/src/examples/icon/custom.tsx
@@ -7,5 +7,5 @@ const HeartIcon = createIcon({
 });
 
 export default () => {
-	return <HeartIcon size="small" title="Add to favourites" />;
+	return <HeartIcon size="px20" title="Add to favourites" />;
 };
diff --git a/apps/docs/src/examples/icon/decorative.tsx b/apps/docs/src/examples/icon/decorative.tsx
index b4b9d238..eb8657f7 100644
--- a/apps/docs/src/examples/icon/decorative.tsx
+++ b/apps/docs/src/examples/icon/decorative.tsx
@@ -6,7 +6,7 @@ export default () => {
 	return (
 		<Cluster alignItems="center" gap="sp4">
 			<Text>Continue</Text>
-			<Icon name="externalLink" size="xsmall" />
+			<Icon name="externalLink" size="px16" />
 		</Cluster>
 	);
 };
diff --git a/apps/docs/src/examples/icon/size-context.tsx b/apps/docs/src/examples/icon/size-context.tsx
index 9a1d6a3d..c82980da 100644
--- a/apps/docs/src/examples/icon/size-context.tsx
+++ b/apps/docs/src/examples/icon/size-context.tsx
@@ -3,7 +3,7 @@ import { Icon, IconSizeProvider } from '@luke-ui/react/icon';
 
 export default () => {
 	return (
-		<IconSizeProvider size="small">
+		<IconSizeProvider size="px20">
 			<Cluster alignItems="center" gap="sp16">
 				<Icon name="chevronLeft" title="Previous" />
 				<Icon name="chevronRight" title="Next" />
diff --git a/apps/docs/src/examples/icon/sizes.tsx b/apps/docs/src/examples/icon/sizes.tsx
index c8f9277f..65499d62 100644
--- a/apps/docs/src/examples/icon/sizes.tsx
+++ b/apps/docs/src/examples/icon/sizes.tsx
@@ -4,17 +4,17 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison direction="horizontal">
-			<ComparisonItem label="X-small">
-				<Icon name="search" size="xsmall" />
+			<ComparisonItem label="px16">
+				<Icon name="search" size="px16" />
 			</ComparisonItem>
-			<ComparisonItem label="Small">
-				<Icon name="search" size="small" />
+			<ComparisonItem label="px20">
+				<Icon name="search" size="px20" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<Icon name="search" size="medium" />
+			<ComparisonItem label="px24">
+				<Icon name="search" size="px24" />
 			</ComparisonItem>
-			<ComparisonItem label="Large">
-				<Icon name="search" size="large" />
+			<ComparisonItem label="px32">
+				<Icon name="search" size="px32" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/loading-spinner/sizes.tsx b/apps/docs/src/examples/loading-spinner/sizes.tsx
index 487ffb26..c09119c8 100644
--- a/apps/docs/src/examples/loading-spinner/sizes.tsx
+++ b/apps/docs/src/examples/loading-spinner/sizes.tsx
@@ -4,17 +4,17 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison align="center">
-			<ComparisonItem label="X-small">
-				<LoadingSpinner aria-label="Loading" size="xsmall" />
+			<ComparisonItem label="px16">
+				<LoadingSpinner aria-label="Loading" size="px16" />
 			</ComparisonItem>
-			<ComparisonItem label="Small">
-				<LoadingSpinner aria-label="Loading" size="small" />
+			<ComparisonItem label="px20">
+				<LoadingSpinner aria-label="Loading" size="px20" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<LoadingSpinner aria-label="Loading" size="medium" />
+			<ComparisonItem label="px24">
+				<LoadingSpinner aria-label="Loading" size="px24" />
 			</ComparisonItem>
-			<ComparisonItem label="Large">
-				<LoadingSpinner aria-label="Loading" size="large" />
+			<ComparisonItem label="px32">
+				<LoadingSpinner aria-label="Loading" size="px32" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/lockup/basic.tsx b/apps/docs/src/examples/lockup/basic.tsx
index dbc426f9..7e1b979f 100644
--- a/apps/docs/src/examples/lockup/basic.tsx
+++ b/apps/docs/src/examples/lockup/basic.tsx
@@ -14,7 +14,7 @@ export default () => {
 					Example message that wraps onto multiple lines when the available space is limited.
 				</LockupBody>
 				<LockupRail>
-					<IconButton aria-label="More options" icon="chevronDown" size="small" />
+					<IconButton aria-label="More options" icon="chevronDown" size="px32" />
 				</LockupRail>
 			</Lockup>
 		</Box>
diff --git a/apps/docs/src/examples/lockup/interactive.tsx b/apps/docs/src/examples/lockup/interactive.tsx
index 50a088e5..d9b4b4ed 100644
--- a/apps/docs/src/examples/lockup/interactive.tsx
+++ b/apps/docs/src/examples/lockup/interactive.tsx
@@ -16,7 +16,7 @@ export default () => {
 				</Stack>
 			</LockupBody>
 			<LockupRail>
-				<IconButton aria-label="More options" icon="chevronDown" size="small" />
+				<IconButton aria-label="More options" icon="chevronDown" size="px32" />
 			</LockupRail>
 		</Lockup>
 	);
diff --git a/apps/docs/src/examples/select-field/sizes.tsx b/apps/docs/src/examples/select-field/sizes.tsx
index 013672fa..6a82ceed 100644
--- a/apps/docs/src/examples/select-field/sizes.tsx
+++ b/apps/docs/src/examples/select-field/sizes.tsx
@@ -9,24 +9,24 @@ const options = [
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
+			<ComparisonItem label="px32">
 				<SelectField
 					items={options}
 					label="Example field"
 					name="example"
 					placeholder="Choose an option"
-					size="small"
+					size="px32"
 				>
 					{(item) => <SelectItem>{item.label}</SelectItem>}
 				</SelectField>
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
+			<ComparisonItem label="px40">
 				<SelectField
 					items={options}
 					label="Example field"
 					name="example"
 					placeholder="Choose an option"
-					size="medium"
+					size="px40"
 				>
 					{(item) => <SelectItem>{item.label}</SelectItem>}
 				</SelectField>
diff --git a/apps/docs/src/examples/switch-field/sizes.tsx b/apps/docs/src/examples/switch-field/sizes.tsx
index cdc0c216..05c894d3 100644
--- a/apps/docs/src/examples/switch-field/sizes.tsx
+++ b/apps/docs/src/examples/switch-field/sizes.tsx
@@ -4,14 +4,14 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
-				<SwitchField defaultSelected label="Example switch" size="small" />
+			<ComparisonItem label="px16">
+				<SwitchField defaultSelected label="Example switch" size="px16" />
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
-				<SwitchField defaultSelected label="Example switch" size="medium" />
+			<ComparisonItem label="px20">
+				<SwitchField defaultSelected label="Example switch" size="px20" />
 			</ComparisonItem>
-			<ComparisonItem label="Large">
-				<SwitchField defaultSelected label="Example switch" size="large" />
+			<ComparisonItem label="px24">
+				<SwitchField defaultSelected label="Example switch" size="px24" />
 			</ComparisonItem>
 		</Comparison>
 	);
diff --git a/apps/docs/src/examples/text-input-field/prefix-and-suffix.tsx b/apps/docs/src/examples/text-input-field/prefix-and-suffix.tsx
index 967030e9..bec549af 100644
--- a/apps/docs/src/examples/text-input-field/prefix-and-suffix.tsx
+++ b/apps/docs/src/examples/text-input-field/prefix-and-suffix.tsx
@@ -9,7 +9,7 @@ export default () => {
 				label="Search documentation"
 				name="documentationSearch"
 				placeholder="Search components"
-				prefix={<Icon name="search" size="small" />}
+				prefix={<Icon name="search" size="px20" />}
 			/>
 			<TextInputField label="Website" name="website" placeholder="example.com" prefix="https://" />
 			<TextInputField label="Budget" name="budget" placeholder="0.00" suffix="AUD" />
diff --git a/apps/docs/src/examples/text-input-field/sizes.tsx b/apps/docs/src/examples/text-input-field/sizes.tsx
index 141ee335..ad6125fd 100644
--- a/apps/docs/src/examples/text-input-field/sizes.tsx
+++ b/apps/docs/src/examples/text-input-field/sizes.tsx
@@ -4,20 +4,20 @@ import { Comparison, ComparisonItem } from '#docs';
 export default () => {
 	return (
 		<Comparison>
-			<ComparisonItem label="Small">
+			<ComparisonItem label="px32">
 				<TextInputField
 					label="Example field"
 					name="example"
 					placeholder="Example input"
-					size="small"
+					size="px32"
 				/>
 			</ComparisonItem>
-			<ComparisonItem label="Medium">
+			<ComparisonItem label="px40">
 				<TextInputField
 					label="Example field"
 					name="example"
 					placeholder="Example input"
-					size="medium"
+					size="px40"
 				/>
 			</ComparisonItem>
 		</Comparison>
diff --git a/apps/docs/src/routes/index.tsx b/apps/docs/src/routes/index.tsx
index d1dff051..0f9861e5 100644
--- a/apps/docs/src/routes/index.tsx
+++ b/apps/docs/src/routes/index.tsx
@@ -34,7 +34,7 @@ function Home() {
 			<Container
 				elementType="main"
 				flexGrow="1"
-				maxInlineSize="ct1152"
+				maxInlineSize="px1152"
 				paddingInline={{
 					initial: 'sp16',
 					bp768: 'sp24',
diff --git a/apps/docs/src/samples/styling/component-props.tsx b/apps/docs/src/samples/styling/component-props.tsx
index db62893c..0c9156a2 100644
--- a/apps/docs/src/samples/styling/component-props.tsx
+++ b/apps/docs/src/samples/styling/component-props.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@luke-ui/react/button';
 
 export function SaveButton() {
-	return <Button size="small">Save changes</Button>;
+	return <Button size="px32">Save changes</Button>;
 }
diff --git a/apps/reference-app/src/app.browser.test.tsx b/apps/reference-app/src/app.browser.test.tsx
index ab581a6f..06d0605a 100644
--- a/apps/reference-app/src/app.browser.test.tsx
+++ b/apps/reference-app/src/app.browser.test.tsx
@@ -247,11 +247,23 @@ test('text size changes actual heading geometry', async () => {
 	const app = await renderApp();
 	const heading = app.locator.getByRole('heading', { name: 'Preferences', level: 1 });
 	await expect.element(heading).toBeVisible();
-	const initialHeight = heading.element().getBoundingClientRect().height;
+	const defaultHeight = heading.element().getBoundingClientRect().height;
+
+	await chooseOption(app, 'Text size', 'Small');
+	expect(document.documentElement.dataset.fontSize).toBe('small');
+	await expect
+		.poll(() => heading.element().getBoundingClientRect().height)
+		.toBeLessThan(defaultHeight);
+	const smallHeight = heading.element().getBoundingClientRect().height;
+
 	await chooseOption(app, 'Text size', 'Large');
+	expect(document.documentElement.dataset.fontSize).toBe('large');
+	await expect
+		.poll(() => heading.element().getBoundingClientRect().height)
+		.toBeGreaterThan(defaultHeight);
 	await expect
 		.poll(() => heading.element().getBoundingClientRect().height)
-		.toBeGreaterThan(initialHeight);
+		.toBeGreaterThan(smallHeight);
 });
 
 test('clearing saved settings waits for saves, cancels, retries failures, and restores defaults', async () => {
diff --git a/apps/reference-app/src/components/change-email-dialog.tsx b/apps/reference-app/src/components/change-email-dialog.tsx
index 0a36f4eb..6f3fd45c 100644
--- a/apps/reference-app/src/components/change-email-dialog.tsx
+++ b/apps/reference-app/src/components/change-email-dialog.tsx
@@ -70,7 +70,7 @@ export function ChangeEmailDialog({ email }: { email: string }) {
 	return (
 		<DialogTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
 			<RacButton aria-label="Change email" className={styles.emailEditButton}>
-				<Icon aria-hidden="true" name="edit" size="xsmall" />
+				<Icon aria-hidden="true" name="edit" size="px16" />
 			</RacButton>
 			<ModalOverlay
 				className={styles.dialogOverlay}
@@ -115,7 +115,7 @@ export function ChangeEmailDialog({ email }: { email: string }) {
 										mutation.reset();
 									}}
 									placeholder="New email address"
-									size="small"
+									size="px32"
 									validationBehavior="aria"
 									value={draft}
 								/>
diff --git a/apps/reference-app/src/components/profile-avatar-section.tsx b/apps/reference-app/src/components/profile-avatar-section.tsx
index 08cf5146..679ff435 100644
--- a/apps/reference-app/src/components/profile-avatar-section.tsx
+++ b/apps/reference-app/src/components/profile-avatar-section.tsx
@@ -138,7 +138,7 @@ export function ProfileAvatarSection({
 								</Text>
 							)}
 							<span aria-hidden="true" className={styles.avatarOverlay}>
-								<Icon name="edit" size="xsmall" />
+								<Icon name="edit" size="px16" />
 							</span>
 						</RacButton>
 						<Popover className={styles.menuPopover} placement="bottom end">
@@ -155,7 +155,7 @@ export function ProfileAvatarSection({
 								}}
 							>
 								<MenuItem className={styles.menuItem} id="change" textValue="Change picture">
-									<Icon name="edit" size="small" />
+									<Icon name="edit" size="px20" />
 									<Text>Change picture</Text>
 								</MenuItem>
 								<MenuItem
@@ -164,7 +164,7 @@ export function ProfileAvatarSection({
 									isDisabled={!profile.avatarDataUrl}
 									textValue="Remove picture"
 								>
-									<Icon name="close" size="small" />
+									<Icon name="close" size="px20" />
 									<Text>Remove picture</Text>
 								</MenuItem>
 							</Menu>
@@ -181,7 +181,7 @@ export function ProfileAvatarSection({
 					{avatarMutationError && avatarMutationVariables !== undefined ? (
 						<Button
 							onPress={() => void saveAvatar(avatarMutationVariables)}
-							size="small"
+							size="px32"
 							type="button"
 						>
 							Try again
diff --git a/apps/reference-app/src/components/profile-text-field.tsx b/apps/reference-app/src/components/profile-text-field.tsx
index 86ad3a97..e322b72a 100644
--- a/apps/reference-app/src/components/profile-text-field.tsx
+++ b/apps/reference-app/src/components/profile-text-field.tsx
@@ -79,7 +79,7 @@ export function ProfileTextField({
 					setValidationError(undefined);
 					mutation.reset();
 				}}
-				size="small"
+				size="px32"
 				validationBehavior="aria"
 				value={draft ?? value}
 			>
diff --git a/apps/reference-app/src/components/settings-nav.tsx b/apps/reference-app/src/components/settings-nav.tsx
index e276ec62..b08eb4f9 100644
--- a/apps/reference-app/src/components/settings-nav.tsx
+++ b/apps/reference-app/src/components/settings-nav.tsx
@@ -34,8 +34,8 @@ export function SettingsNavSearch({
 			aria-label="Search settings"
 			onChange={onChange}
 			placeholder="Search…"
-			prefix={<Icon name="search" size="small" />}
-			size="small"
+			prefix={<Icon name="search" size="px20" />}
+			size="px32"
 			type="search"
 			value={value}
 		/>
@@ -96,7 +96,7 @@ function SettingsNavList({
 function SettingsNavLink({ className, item }: { className: string; item: SettingsNavItem }) {
 	return (
 		<NavLink className={className} end to={item.to}>
-			<Icon name={item.icon} size="xsmall" />
+			<Icon name={item.icon} size="px16" />
 			{item.label}
 		</NavLink>
 	);
diff --git a/apps/reference-app/src/routes/app-routes.tsx b/apps/reference-app/src/routes/app-routes.tsx
index c504c49c..daf9ff65 100644
--- a/apps/reference-app/src/routes/app-routes.tsx
+++ b/apps/reference-app/src/routes/app-routes.tsx
@@ -58,7 +58,7 @@ function RouteError() {
 	return (
 		<ErrorPage
 			action={
-				<Button onPress={() => window.location.reload()} size="small">
+				<Button onPress={() => window.location.reload()} size="px32">
 					Try again
 				</Button>
 			}
diff --git a/apps/reference-app/src/routes/home.tsx b/apps/reference-app/src/routes/home.tsx
index c2499e46..baa23e41 100644
--- a/apps/reference-app/src/routes/home.tsx
+++ b/apps/reference-app/src/routes/home.tsx
@@ -42,7 +42,7 @@ export function HomePage() {
 					paddingBlock={{ bp768: 'sp64', initial: 'sp32' }}
 					paddingInline={{ bp768: 'sp40', initial: 'sp16' }}
 				>
-					<Container maxInlineSize="ct672">
+					<Container maxInlineSize="px672">
 						<Stack alignItems="flex-start" gap="sp16">
 							<Heading level={1} shouldDisableTrim typography="heading2">
 								Welcome back, {firstName}
diff --git a/apps/reference-app/src/routes/preferences.tsx b/apps/reference-app/src/routes/preferences.tsx
index 3d7e704b..6fa6959a 100644
--- a/apps/reference-app/src/routes/preferences.tsx
+++ b/apps/reference-app/src/routes/preferences.tsx
@@ -113,7 +113,7 @@ function SelectPreferenceRow({
 					if (key == null) return;
 					onSave({ [pref.key]: pref.parse(String(key)) });
 				}}
-				size="small"
+				size="px32"
 				triggerId={pref.id}
 				value={values[pref.key]}
 			>
diff --git a/apps/reference-app/src/routes/settings-layout.tsx b/apps/reference-app/src/routes/settings-layout.tsx
index 182065a5..49865ad3 100644
--- a/apps/reference-app/src/routes/settings-layout.tsx
+++ b/apps/reference-app/src/routes/settings-layout.tsx
@@ -100,7 +100,7 @@ export function SettingsLayout() {
 								appearance="button"
 								href="/"
 								prominence="low"
-								size="small"
+								size="px32"
 								startContent={<Icon name="chevronLeft" />}
 							>
 								Back to app
@@ -144,12 +144,12 @@ export function SettingsLayout() {
 								marginBlockEnd="sp16"
 							>
 								<RouterLink className={styles.mobileHeaderLink} to="/settings/menu">
-									<Icon name="chevronLeft" size="xsmall" />
+									<Icon name="chevronLeft" size="px16" />
 									Settings
 								</RouterLink>
 							</Box>
 						)}
-						<Container maxInlineSize="ct672">
+						<Container maxInlineSize="px672">
 							<Outlet
 								context={
 									{
diff --git a/docs/STYLING.md b/docs/STYLING.md
index eea39e7b..5854fe67 100644
--- a/docs/STYLING.md
+++ b/docs/STYLING.md
@@ -255,7 +255,7 @@ a function that takes a variant selection plus optional `className` and returns
 ```ts
 export const buttonRecipe = recipe({
 	base: {/* … */},
-	defaultVariants: { appearance: 'solid', size: 'medium', tone: 'neutral' },
+	defaultVariants: { appearance: 'solid', size: 'px40', tone: 'neutral' },
 	variants: {
 		appearance: { ghost: {}, solid: {}, subtle: {} },
 		size: {/* … */},
@@ -363,6 +363,34 @@ The runtime value is still a mutable `Set`.
 Spacing and gap properties use `0` or value-based keys such as `sp16` and `sp24`. Keys are emitted
 as `rem`. Margin also accepts `auto`. Enum-like properties use CSS-native values.
 
+### Literal size keys
+
+Fixed measurements that do not vary by theme use curated `px*` keys, not T-shirt names. A key such
+as `px16` means 16 CSS pixels at a 16px root. Emit the style value with `rem` so root-font scaling
+still applies. The number always describes the component's own dimension: control block size for
+buttons and fields, indicator size for Checkbox, track block size for Switch, square size for Icon
+and LoadingSpinner, and maximum inline size for Container.
+
+Build these scales with `literalScale` in `theme/literal-scale.ts`. Pass the numeric steps once. The
+helper derives both the key and the `rem` value (`16` → `px16: rem(16)`), so names cannot drift from
+values. Each component keeps a curated set of steps. Do not accept arbitrary lengths on every `size`
+prop. Never add `px`/`py` shorthand props: in Tailwind those names mean horizontal and vertical
+padding.
+
+A prefix names the kind of value, not only the unit. Responsive condition keys stay `bp*` (CSS-pixel
+container-width thresholds from that width upwards). A declaration such as
+`{ initial: 'px8', bp768: 'px16' }` deliberately distinguishes a breakpoint condition from the
+length it selects.
+
+`sp*` spacing is the only intentional temporary exception. Migrate it to `px*` through the same
+helper before the next release ([#847](https://github.com/lukebennett88/luke-ui/issues/847)). Do not
+publish a version that mixes `px*` component sizes with `sp*` spacing keys.
+
+Buttons provide `px16` icons and spinners at both `px32` and `px40`. Field controls provide `px16`
+icons at `px32` and `px20` icons at `px40`. Explicit `Icon` `size` overrides still win over context.
+Do not document a pairing between field or button height and Checkbox or Switch size: those
+indicators align to label line height, not a companion control.
+
 ### Responsive values
 
 Use object notation keyed by breakpoint names. Values cascade from smaller to larger breakpoints.
diff --git a/packages/@luke-ui/react/src/core/action-presentation.ts b/packages/@luke-ui/react/src/core/action-presentation.ts
index 34598c18..c8564af3 100644
--- a/packages/@luke-ui/react/src/core/action-presentation.ts
+++ b/packages/@luke-ui/react/src/core/action-presentation.ts
@@ -21,9 +21,9 @@ export type ButtonPresentationProps =
 			prominence?: Prominence;
 			/**
 			 * Sets the size of the control.
-			 * @default medium
+			 * @default px40
 			 */
-			size?: 'small' | 'medium';
+			size?: 'px32' | 'px40';
 			/**
 			 * Sets the visual tone. Use `critical` for destructive actions.
 			 * @default neutral
@@ -103,9 +103,9 @@ export type LinkPresentationProps =
 			prominence?: Prominence;
 			/**
 			 * Sets the size of the control.
-			 * @default medium
+			 * @default px40
 			 */
-			size?: 'small' | 'medium';
+			size?: 'px32' | 'px40';
 	  };
 
 /** Visual presentation props accepted by IconButton. */
@@ -117,9 +117,9 @@ export interface IconButtonPresentationProps {
 	prominence?: Prominence;
 	/**
 	 * Sets the size of the control.
-	 * @default medium
+	 * @default px40
 	 */
-	size?: 'small' | 'medium';
+	size?: 'px32' | 'px40';
 	/**
 	 * Sets the visual tone. Use `critical` for destructive actions.
 	 * @default neutral
@@ -136,7 +136,7 @@ export interface IconLinkPresentationProps {
 	prominence?: Prominence;
 	/**
 	 * Sets the size of the control.
-	 * @default medium
+	 * @default px40
 	 */
-	size?: 'small' | 'medium';
+	size?: 'px32' | 'px40';
 }
diff --git a/packages/@luke-ui/react/src/core/button/button.browser.test.tsx b/packages/@luke-ui/react/src/core/button/button.browser.test.tsx
index 15a62a81..fe827e64 100644
--- a/packages/@luke-ui/react/src/core/button/button.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/button/button.browser.test.tsx
@@ -105,7 +105,7 @@ test('the Button scene has no axe violations', async () => {
 // The inset is the padding plus the 1px border it replaces, so the Button keeps the outer size it
 // had with a border.
 test('a medium Button insets its label 17px from each edge with forced colours none', () => {
-	const { locator } = render(<Button size="medium">Save changes</Button>);
+	const { locator } = render(<Button size="px40">Save changes</Button>);
 	const button = locator.getByRole('button', { name: 'Save changes' }).element();
 	const label = button.querySelector('span');
 	if (!(label instanceof HTMLElement)) throw new Error('Expected a label.');
diff --git a/packages/@luke-ui/react/src/core/button/button.test.ts b/packages/@luke-ui/react/src/core/button/button.test.ts
index a5c921e2..fabc3aa7 100644
--- a/packages/@luke-ui/react/src/core/button/button.test.ts
+++ b/packages/@luke-ui/react/src/core/button/button.test.ts
@@ -10,7 +10,7 @@ test('Button supports ref and rejects unsupported prop combinations', () => {
 	// @ts-expect-error — high-level Button omits RAC render; use function children instead
 	assertType<ButtonProps>({ render: (props) => createElement('button', props) });
 	// @ts-expect-error — text Buttons wrap and do not use control sizing
-	assertType<ButtonProps>({ appearance: 'text', size: 'small' });
+	assertType<ButtonProps>({ appearance: 'text', size: 'px32' });
 	// @ts-expect-error — accent is not a consumer-selectable tone
 	assertType<ButtonProps>({ prominence: 'low', tone: 'accent' });
 	// @ts-expect-error — critical text Buttons do not have high prominence
diff --git a/packages/@luke-ui/react/src/core/button/recipe.css.ts b/packages/@luke-ui/react/src/core/button/recipe.css.ts
index 814e7c47..a6961cd0 100644
--- a/packages/@luke-ui/react/src/core/button/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/button/recipe.css.ts
@@ -11,7 +11,7 @@ export const buttonRecipe = withDefaultVariants<
 	appearance: 'button',
 	isBlock: false,
 	prominence: 'standard',
-	size: 'medium',
+	size: 'px40',
 	tone: 'neutral',
 });
 
diff --git a/packages/@luke-ui/react/src/core/checkbox-field/checkbox-field.browser.test.tsx b/packages/@luke-ui/react/src/core/checkbox-field/checkbox-field.browser.test.tsx
index caca0d9e..82ae749b 100644
--- a/packages/@luke-ui/react/src/core/checkbox-field/checkbox-field.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/checkbox-field/checkbox-field.browser.test.tsx
@@ -34,7 +34,7 @@ function CheckboxScene() {
 				description="Receive updates by email."
 				label="Email notifications"
 				name="description-small"
-				size="small"
+				size="px16"
 			/>
 			<CheckboxField
 				description="This supporting text wraps onto a second line and should still start at the field's inline edge, not under the label."
@@ -45,7 +45,7 @@ function CheckboxScene() {
 				description="Receive updates by email."
 				label="Email notifications"
 				name="description-large"
-				size="large"
+				size="px24"
 			/>
 			<CheckboxField
 				defaultSelected
diff --git a/packages/@luke-ui/react/src/core/combobox-field/combobox-field.browser.test.tsx b/packages/@luke-ui/react/src/core/combobox-field/combobox-field.browser.test.tsx
index aad0b5cb..1710b6bf 100644
--- a/packages/@luke-ui/react/src/core/combobox-field/combobox-field.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/combobox-field/combobox-field.browser.test.tsx
@@ -410,7 +410,7 @@ test('an unlabeled ComboboxField exposes aria-label on the combobox', () => {
 
 // The clear and toggle buttons sit side by side, so WCAG 2.5.8's spacing exception cannot excuse a
 // target under 24px. Applications may set a root font size below 16px.
-for (const size of ['small', 'medium'] as const) {
+for (const size of ['px32', 'px40'] as const) {
 	test(`the ${size} ComboboxField action buttons stay at least 24px at a 13px root font size`, () => {
 		document.documentElement.style.fontSize = '13px';
 
@@ -645,7 +645,7 @@ test('kitchen sink', { tags: ['visual'] }, async () => {
 					errorMessage="Choose a different country."
 					label="Invalid small"
 					name="invalid-small"
-					size="small"
+					size="px32"
 				>
 					{renderCountryItem}
 				</ComboboxField>
@@ -664,7 +664,7 @@ test('kitchen sink', { tags: ['visual'] }, async () => {
 					label="Small"
 					name="small"
 					placeholder="Small"
-					size="small"
+					size="px32"
 				>
 					{renderCountryItem}
 				</ComboboxField>
@@ -673,19 +673,19 @@ test('kitchen sink', { tags: ['visual'] }, async () => {
 					label="Medium"
 					name="medium"
 					placeholder="Medium"
-					size="medium"
+					size="px40"
 				>
 					{renderCountryItem}
 				</ComboboxField>
 				<ComboboxRoot
 					defaultItems={sceneCountryItems}
 					name="small-group-medium-trigger"
-					size="small"
+					size="px32"
 				>
 					<Field label="Small group, medium trigger">
 						<ComboboxControl>
 							<ComboboxInput placeholder="Select a country..." />
-							<ComboboxTrigger aria-label="Toggle medium trigger" size="medium">
+							<ComboboxTrigger aria-label="Toggle medium trigger" size="px40">
 								<Icon name="chevronDown" />
 							</ComboboxTrigger>
 						</ComboboxControl>
diff --git a/packages/@luke-ui/react/src/core/combobox-field/combobox-field.tsx b/packages/@luke-ui/react/src/core/combobox-field/combobox-field.tsx
index bf0a3bd4..d89a7905 100644
--- a/packages/@luke-ui/react/src/core/combobox-field/combobox-field.tsx
+++ b/packages/@luke-ui/react/src/core/combobox-field/combobox-field.tsx
@@ -98,7 +98,7 @@ interface _ComboboxFieldBaseProps<T extends object>
 	/** Forwarded to the field's root element. Use `inputRef` for the input. */
 	ref?: ComboboxRootProps<T>['ref'];
 
-	/** Control size. @default 'medium' */
+	/** Control size. @default 'px40' */
 	size?: ComboboxSize;
 }
 
@@ -128,7 +128,7 @@ export function ComboboxField<T extends object>(props: ComboboxFieldProps<T>): J
 		onLoadMore,
 		placeholder,
 		popoverProps,
-		size = 'medium',
+		size = 'px40',
 		...comboboxRootProps
 	} = props;
 
@@ -145,7 +145,7 @@ export function ComboboxField<T extends object>(props: ComboboxFieldProps<T>): J
 
 		return (
 			<ComboboxLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore}>
-				<LoadingSpinner aria-label="Loading more options..." size="small" />
+				<LoadingSpinner aria-label="Loading more options..." size="px20" />
 			</ComboboxLoadMoreItem>
 		);
 	})();
@@ -241,7 +241,7 @@ function ComboboxEmptyStateContent({
 	if (loadingState === 'loading' || loadingState === 'filtering') {
 		return (
 			<ComboboxEmptyState>
-				<LoadingSpinner aria-label="Loading options..." size="medium" />
+				<LoadingSpinner aria-label="Loading options..." size="px24" />
 			</ComboboxEmptyState>
 		);
 	}
diff --git a/packages/@luke-ui/react/src/core/container/container.browser.test.tsx b/packages/@luke-ui/react/src/core/container/container.browser.test.tsx
index 0f9d845b..6fe28119 100644
--- a/packages/@luke-ui/react/src/core/container/container.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/container/container.browser.test.tsx
@@ -8,11 +8,11 @@ import { render, visualAppearances } from '../test-utils/render.js';
 import { captureVisualAppearance } from '../test-utils/visual.js';
 
 const fixedSizes = [
-	['ct448', 448],
-	['ct672', 672],
-	['ct896', 896],
-	['ct1152', 1152],
-	['ct1280', 1280],
+	['px448', 448],
+	['px672', 672],
+	['px896', 896],
+	['px1152', 1152],
+	['px1280', 1280],
 ] as const;
 
 afterEach(async () => {
@@ -22,7 +22,7 @@ afterEach(async () => {
 test('uses its fixed maximum as a border-box width and centres by default', () => {
 	const { locator } = render(
 		<div data-testid="parent" style={{ inlineSize: '800px' }}>
-			<Container data-testid="container" maxInlineSize="ct672" paddingInline="sp16">
+			<Container data-testid="container" maxInlineSize="px672" paddingInline="sp16">
 				Content
 			</Container>
 		</div>,
@@ -58,7 +58,7 @@ for (const [maxInlineSize, expectedWidth] of fixedSizes) {
 test('lets marginInline override its default centring', () => {
 	const { locator } = render(
 		<div style={{ inlineSize: '800px' }}>
-			<Container data-testid="container" marginInline="0" maxInlineSize="ct448">
+			<Container data-testid="container" marginInline="0" maxInlineSize="px448">
 				Content
 			</Container>
 		</div>,
@@ -74,7 +74,7 @@ test('uses the nearest nested Container as the query boundary', async () => {
 	const { locator } = render(
 		<Container maxInlineSize="100%" paddingInline="sp16">
 			<Box data-testid="outer" display={{ initial: 'block', bp768: 'flex' }} />
-			<Container maxInlineSize="ct672">
+			<Container maxInlineSize="px672">
 				<Box data-testid="nested" display={{ initial: 'block', bp768: 'flex' }} />
 			</Container>
 		</Container>,
@@ -105,7 +105,7 @@ test('caps the border box at an arbitrary CSS maxInlineSize', () => {
 
 test('supports semantic and caller-owned elements', () => {
 	const semantic = render(
-		<Container aria-label="Page content" elementType="main" maxInlineSize="ct896">
+		<Container aria-label="Page content" elementType="main" maxInlineSize="px896">
 			Page content
 		</Container>,
 	);
@@ -115,7 +115,7 @@ test('supports semantic and caller-owned elements', () => {
 
 	const custom = render(
 		<Container
-			maxInlineSize="ct896"
+			maxInlineSize="px896"
 			renderRoot={(domProps) => <section {...domProps} data-testid="custom-container" />}
 		>
 			Custom content
@@ -127,7 +127,7 @@ test('supports semantic and caller-owned elements', () => {
 	expect(getComputedStyle(element).containerType).toBe('inline-size');
 });
 
-const sizes = ['ct448', 'ct672', 'ct896'] as const;
+const sizes = ['px448', 'px672', 'px896'] as const;
 
 test('fixed maximum inline sizes', { tags: ['visual'] }, async () => {
 	for (const appearance of visualAppearances) {
diff --git a/packages/@luke-ui/react/src/core/container/container.test.ts b/packages/@luke-ui/react/src/core/container/container.test.ts
index 6823aad9..886fc4a6 100644
--- a/packages/@luke-ui/react/src/core/container/container.test.ts
+++ b/packages/@luke-ui/react/src/core/container/container.test.ts
@@ -5,12 +5,12 @@ test('Container rejects the props it does not support', () => {
 	// @ts-expect-error — Container requires a maximum inline size
 	assertType<ContainerProps>({});
 	// @ts-expect-error — Container has no inlineSize prop
-	assertType<ContainerProps>({ inlineSize: '50%', maxInlineSize: 'ct672' });
+	assertType<ContainerProps>({ inlineSize: '50%', maxInlineSize: 'px672' });
 	assertType<ContainerProps>({
 		// @ts-expect-error — Container does not expose Box appearance utilities
 		backgroundColor: 'surface.base',
-		maxInlineSize: 'ct672',
+		maxInlineSize: 'px672',
 	});
 	// @ts-expect-error — Container has no display prop
-	assertType<ContainerProps>({ display: 'grid', maxInlineSize: 'ct672' });
+	assertType<ContainerProps>({ display: 'grid', maxInlineSize: 'px672' });
 });
diff --git a/packages/@luke-ui/react/src/core/container/recipe.css.ts b/packages/@luke-ui/react/src/core/container/recipe.css.ts
index e37a552b..c0ef356c 100644
--- a/packages/@luke-ui/react/src/core/container/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/container/recipe.css.ts
@@ -1,15 +1,11 @@
 import { createVar } from '@vanilla-extract/css';
-import { rem } from '../../theme/rem.js';
+import { literalScale } from '../../theme/literal-scale.js';
 import { recipe } from '../styles/recipe.js';
 
 /** Rem values for fixed `maxInlineSize` tokens on `Container`. */
-export const containerMaxInlineSizeTokens = {
-	ct448: rem(448),
-	ct672: rem(672),
-	ct896: rem(896),
-	ct1152: rem(1152),
-	ct1280: rem(1280),
-} as const;
+export const containerMaxInlineSizeTokens = literalScale('px', [
+	448, 672, 896, 1152, 1280,
+] as const);
 
 /**
  * Supplies `maxInlineSize` for token variants. Arbitrary values are set via `assignInlineVars`
@@ -27,11 +23,11 @@ export const containerRecipe = recipe({
 	},
 	variants: {
 		maxInlineSize: {
-			ct448: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.ct448 } },
-			ct672: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.ct672 } },
-			ct896: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.ct896 } },
-			ct1152: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.ct1152 } },
-			ct1280: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.ct1280 } },
+			px448: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.px448 } },
+			px672: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.px672 } },
+			px896: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.px896 } },
+			px1152: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.px1152 } },
+			px1280: { vars: { [containerMaxInlineSizeVar]: containerMaxInlineSizeTokens.px1280 } },
 		},
 	},
 });
diff --git a/packages/@luke-ui/react/src/core/grid/grid.browser.test.tsx b/packages/@luke-ui/react/src/core/grid/grid.browser.test.tsx
index ade0d63d..102e9929 100644
--- a/packages/@luke-ui/react/src/core/grid/grid.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/grid/grid.browser.test.tsx
@@ -272,7 +272,7 @@ test('resolves responsive columns against nested size containers', async () => {
 				<span style={{ blockSize: '1rem' }} />
 				<span style={{ blockSize: '1rem' }} />
 			</Grid>
-			<Container maxInlineSize="ct448">
+			<Container maxInlineSize="px448">
 				<Grid columns={{ initial: 1, bp768: '1fr 1fr 1fr 1fr' }} data-testid="nested" gap="sp8">
 					<span style={{ blockSize: '1rem' }} />
 					<span style={{ blockSize: '1rem' }} />
diff --git a/packages/@luke-ui/react/src/core/icon-button/icon-button.browser.test.tsx b/packages/@luke-ui/react/src/core/icon-button/icon-button.browser.test.tsx
index 0bedf81d..57ba62c0 100644
--- a/packages/@luke-ui/react/src/core/icon-button/icon-button.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/icon-button/icon-button.browser.test.tsx
@@ -24,10 +24,10 @@ function UnlabelledCustomIcon(): JSX.Element {
 function IconButtonScene() {
 	return (
 		<Grid columns={4}>
-			<IconButton aria-label="Add small" icon="add" size="small" />
-			<IconButton aria-label="Add medium" icon="add" size="medium" />
-			<IconButton aria-label="Disabled" icon="delete" isDisabled size="small" />
-			<IconButton aria-label="Pending" icon="add" isPending size="medium" />
+			<IconButton aria-label="Add small" icon="add" size="px32" />
+			<IconButton aria-label="Add medium" icon="add" size="px40" />
+			<IconButton aria-label="Disabled" icon="delete" isDisabled size="px32" />
+			<IconButton aria-label="Pending" icon="add" isPending size="px40" />
 			<IconButton aria-label="Standard" icon="add" />
 			<IconButton aria-label="Low" icon="add" prominence="low" />
 			<IconButton aria-label="High" icon="add" prominence="high" />
diff --git a/packages/@luke-ui/react/src/core/icon-button/icon-button.tsx b/packages/@luke-ui/react/src/core/icon-button/icon-button.tsx
index 62cf71ac..c9ac1dc1 100644
--- a/packages/@luke-ui/react/src/core/icon-button/icon-button.tsx
+++ b/packages/@luke-ui/react/src/core/icon-button/icon-button.tsx
@@ -66,7 +66,7 @@ export function IconButton(props: IconButtonProps): JSX.Element {
 		isPending = false,
 		onPress,
 		pressAction,
-		size = 'medium',
+		size = 'px40',
 		...buttonProps
 	} = props;
 	const {
diff --git a/packages/@luke-ui/react/src/core/icon-button/recipe.css.ts b/packages/@luke-ui/react/src/core/icon-button/recipe.css.ts
index d34202a3..bcffb282 100644
--- a/packages/@luke-ui/react/src/core/icon-button/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/icon-button/recipe.css.ts
@@ -10,11 +10,11 @@ export const iconButtonReset = style({
 export const iconButtonRecipe = recipe({
 	variants: {
 		size: {
-			medium: {
-				inlineSize: vars.controlSize.medium,
+			px40: {
+				inlineSize: vars.controlSize.px40,
 			},
-			small: {
-				inlineSize: vars.controlSize.small,
+			px32: {
+				inlineSize: vars.controlSize.px32,
 			},
 		},
 	},
diff --git a/packages/@luke-ui/react/src/core/icon-button/styles.css.ts b/packages/@luke-ui/react/src/core/icon-button/styles.css.ts
index a7db7462..9c0e2807 100644
--- a/packages/@luke-ui/react/src/core/icon-button/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/icon-button/styles.css.ts
@@ -14,6 +14,6 @@ export const iconOnlyIconWrapper = style({
  * graphic box directly for a hand-authored custom icon such as a brand mark.
  */
 globalStyleInLayer('recipes', `${iconOnlyIconWrapper} > svg`, {
-	blockSize: ICON_SIZES.xsmall,
-	inlineSize: ICON_SIZES.xsmall,
+	blockSize: ICON_SIZES.px16,
+	inlineSize: ICON_SIZES.px16,
 });
diff --git a/packages/@luke-ui/react/src/core/icon-link/icon-link.browser.test.tsx b/packages/@luke-ui/react/src/core/icon-link/icon-link.browser.test.tsx
index 80bffee0..9c09f5fb 100644
--- a/packages/@luke-ui/react/src/core/icon-link/icon-link.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/icon-link/icon-link.browser.test.tsx
@@ -35,9 +35,9 @@ function CustomStarIcon(): JSX.Element {
 function IconLinkScene() {
 	return (
 		<Grid columns={4}>
-			<IconLink aria-label="Add small" href="#" icon="add" size="small" />
-			<IconLink aria-label="Add medium" href="#" icon="add" size="medium" />
-			<IconLink aria-label="Disabled" href="#" icon="delete" isDisabled size="small" />
+			<IconLink aria-label="Add small" href="#" icon="add" size="px32" />
+			<IconLink aria-label="Add medium" href="#" icon="add" size="px40" />
+			<IconLink aria-label="Disabled" href="#" icon="delete" isDisabled size="px32" />
 			<IconLink aria-label="Custom icon" href="#" icon={<CustomStarIcon />} />
 			<IconLink aria-label="Standard" href="#" icon="add" />
 			<IconLink aria-label="Low" href="#" icon="add" prominence="low" />
@@ -117,8 +117,8 @@ test('isDisabled exposes RAC disabled state', () => {
 test('the control renders as a square at each size', () => {
 	const { locator } = render(
 		<div>
-			<IconLink aria-label="Small" href="#" icon="search" size="small" />
-			<IconLink aria-label="Medium" href="#" icon="search" size="medium" />
+			<IconLink aria-label="Small" href="#" icon="search" size="px32" />
+			<IconLink aria-label="Medium" href="#" icon="search" size="px40" />
 		</div>,
 	);
 
diff --git a/packages/@luke-ui/react/src/core/icon-link/icon-link.tsx b/packages/@luke-ui/react/src/core/icon-link/icon-link.tsx
index a404202b..38e4850b 100644
--- a/packages/@luke-ui/react/src/core/icon-link/icon-link.tsx
+++ b/packages/@luke-ui/react/src/core/icon-link/icon-link.tsx
@@ -42,7 +42,7 @@ export type IconLinkProps = Prettify<_IconLinkProps & IconLinkBaseProps & Requir
 
 /** Link that renders only an icon, for icon-only navigation. */
 export function IconLink(props: IconLinkProps): JSX.Element {
-	const { prominence = 'standard', icon, size = 'medium', ...restProps } = props;
+	const { prominence = 'standard', icon, size = 'px40', ...restProps } = props;
 
 	return (
 		<IconSizeProvider size={BUTTON_ICON_SIZE}>
diff --git a/packages/@luke-ui/react/src/core/icon/icon.browser.test.tsx b/packages/@luke-ui/react/src/core/icon/icon.browser.test.tsx
index 33780d77..2f539650 100644
--- a/packages/@luke-ui/react/src/core/icon/icon.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/icon/icon.browser.test.tsx
@@ -17,7 +17,7 @@ const rowStyle = {
 	gap: '1rem',
 } satisfies CSSProperties;
 
-const sizes = variantValuesFor<typeof Icon, 'size'>()(['xsmall', 'small', 'medium', 'large']);
+const sizes = variantValuesFor<typeof Icon, 'size'>()(['px16', 'px20', 'px24', 'px32']);
 const names = variantValuesFor<typeof Icon, 'name'>()([
 	'add',
 	'checkCircle',
diff --git a/packages/@luke-ui/react/src/core/icon/icon.tsx b/packages/@luke-ui/react/src/core/icon/icon.tsx
index c1438054..7b314bf3 100644
--- a/packages/@luke-ui/react/src/core/icon/icon.tsx
+++ b/packages/@luke-ui/react/src/core/icon/icon.tsx
@@ -19,7 +19,7 @@ interface IconVariantProps extends NonNullable<IconRecipeVariants> {}
 interface IconStyleProps {
 	/**
 	 * Sets the icon size.
-	 * @default 'medium'
+	 * @default 'px24'
 	 */
 	size?: IconVariantProps['size'];
 }
@@ -80,7 +80,7 @@ export function createIcon<TProps extends CustomIconProps = CustomIconProps>({
 			viewBox ?? (typeof defaultViewBox === 'function' ? defaultViewBox(props) : defaultViewBox);
 		const resolvedPath = typeof path === 'function' ? path(props) : path;
 		const contextSize = useIconSizeContext();
-		const resolvedSize = size ?? contextSize ?? 'medium';
+		const resolvedSize = size ?? contextSize ?? 'px24';
 
 		const svgProps: React.SVGProps<SVGSVGElement> = {
 			'aria-hidden': ariaHidden,
diff --git a/packages/@luke-ui/react/src/core/icon/recipe.css.ts b/packages/@luke-ui/react/src/core/icon/recipe.css.ts
index 84431f45..63c5aab0 100644
--- a/packages/@luke-ui/react/src/core/icon/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/icon/recipe.css.ts
@@ -4,21 +4,21 @@ import { recipe } from '../styles/recipe.js';
 
 /** Shared size dimensions for Icon and LoadingSpinner (icon-aligned sizing). */
 export const iconSizeVariants = {
-	large: {
-		blockSize: ICON_SIZES.large,
-		inlineSize: ICON_SIZES.large,
+	px32: {
+		blockSize: ICON_SIZES.px32,
+		inlineSize: ICON_SIZES.px32,
 	},
-	medium: {
-		blockSize: ICON_SIZES.medium,
-		inlineSize: ICON_SIZES.medium,
+	px24: {
+		blockSize: ICON_SIZES.px24,
+		inlineSize: ICON_SIZES.px24,
 	},
-	small: {
-		blockSize: ICON_SIZES.small,
-		inlineSize: ICON_SIZES.small,
+	px20: {
+		blockSize: ICON_SIZES.px20,
+		inlineSize: ICON_SIZES.px20,
 	},
-	xsmall: {
-		blockSize: ICON_SIZES.xsmall,
-		inlineSize: ICON_SIZES.xsmall,
+	px16: {
+		blockSize: ICON_SIZES.px16,
+		inlineSize: ICON_SIZES.px16,
 	},
 } as const;
 
@@ -28,7 +28,7 @@ export const iconRecipe = recipe({
 		flexShrink: 0,
 	},
 	defaultVariants: {
-		size: 'medium',
+		size: 'px24',
 	},
 	variants: {
 		size: iconSizeVariants,
diff --git a/packages/@luke-ui/react/src/core/link/link.test.ts b/packages/@luke-ui/react/src/core/link/link.test.ts
index 61689a46..a84c4650 100644
--- a/packages/@luke-ui/react/src/core/link/link.test.ts
+++ b/packages/@luke-ui/react/src/core/link/link.test.ts
@@ -10,5 +10,5 @@ test('Link supports ref and rejects unsupported props', () => {
 	// @ts-expect-error — Link has no tone prop
 	assertType<LinkProps>({ href: '/settings', tone: 'critical' });
 	// @ts-expect-error — text Links do not use control sizing
-	assertType<LinkProps>({ href: '/settings', size: 'small' });
+	assertType<LinkProps>({ href: '/settings', size: 'px32' });
 });
diff --git a/packages/@luke-ui/react/src/core/link/recipe.css.ts b/packages/@luke-ui/react/src/core/link/recipe.css.ts
index b3e66db6..36d5bab0 100644
--- a/packages/@luke-ui/react/src/core/link/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/link/recipe.css.ts
@@ -10,7 +10,7 @@ export const linkRecipe = withDefaultVariants<
 >(buttonRecipeInternal, {
 	appearance: 'text',
 	isBlock: false,
-	size: 'medium',
+	size: 'px40',
 	tone: 'neutral',
 	prominence: 'standard',
 });
diff --git a/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.browser.test.tsx b/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.browser.test.tsx
index bd2c50f9..35c62ac3 100644
--- a/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.browser.test.tsx
@@ -22,7 +22,7 @@ const rowStyle = {
 	gap: '1rem',
 } satisfies CSSProperties;
 
-const sizes = variantValuesFor<typeof LoadingSpinner, 'size'>()(['small', 'medium', 'large']);
+const sizes = variantValuesFor<typeof LoadingSpinner, 'size'>()(['px20', 'px24', 'px32']);
 const colors = variantValuesFor<typeof LoadingSpinner, 'color'>()(['primary', 'info', 'danger']);
 
 const fixedChildStyle = {
diff --git a/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.tsx b/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.tsx
index f11d6cda..38038d00 100644
--- a/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.tsx
+++ b/packages/@luke-ui/react/src/core/loading-spinner/loading-spinner.tsx
@@ -21,7 +21,7 @@ interface LoadingSpinnerStyleProps {
 	color?: LoadingSpinnerVariantProps['color'];
 	/**
 	 * Sets the spinner size.
-	 * @default 'medium'
+	 * @default 'px24'
 	 */
 	size?: LoadingSpinnerVariantProps['size'];
 }
@@ -60,7 +60,7 @@ export function LoadingSpinner(props: LoadingSpinnerProps): ReactNode {
 	} = props;
 
 	const contextSize = useIconSizeContext();
-	const resolvedSize = size ?? contextSize ?? 'medium';
+	const resolvedSize = size ?? contextSize ?? 'px24';
 
 	if (!isLoading) return children;
 
diff --git a/packages/@luke-ui/react/src/core/loading-spinner/recipe.css.ts b/packages/@luke-ui/react/src/core/loading-spinner/recipe.css.ts
index 954daa64..ebbb20dd 100644
--- a/packages/@luke-ui/react/src/core/loading-spinner/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/loading-spinner/recipe.css.ts
@@ -38,7 +38,7 @@ export const rubberBandAnimationName = keyframes({
  */
 const loadingSpinnerConfig = {
 	defaultVariants: {
-		size: 'medium',
+		size: 'px24',
 	},
 	slots: {
 		childrenWrapper: {
@@ -102,10 +102,10 @@ const loadingSpinnerConfig = {
 			warning: { root: { color: vars.color.foreground.warning.rest } },
 		},
 		size: {
-			large: { root: iconSizeVariants.large },
-			medium: { root: iconSizeVariants.medium },
-			small: { root: iconSizeVariants.small },
-			xsmall: { root: iconSizeVariants.xsmall },
+			px32: { root: iconSizeVariants.px32 },
+			px24: { root: iconSizeVariants.px24 },
+			px20: { root: iconSizeVariants.px20 },
+			px16: { root: iconSizeVariants.px16 },
 		},
 	},
 } as const satisfies SlottedConfigInput;
diff --git a/packages/@luke-ui/react/src/core/packed-consumer/react-fixture.ts b/packages/@luke-ui/react/src/core/packed-consumer/react-fixture.ts
index 86522336..871abddd 100644
--- a/packages/@luke-ui/react/src/core/packed-consumer/react-fixture.ts
+++ b/packages/@luke-ui/react/src/core/packed-consumer/react-fixture.ts
@@ -365,8 +365,8 @@ export const retainedTokens: Array<string> = [
 	vars.controlFinish.raised,
 	vars.depth.overlay,
 	vars.font.body.lineHeight,
-	vars.controlSize.small,
-	vars.controlSize.medium,
+	vars.controlSize.px32,
+	vars.controlSize.px40,
 	vars.radius.full,
 	vars.interaction.disabledOpacity,
 ];
diff --git a/packages/@luke-ui/react/src/core/packed-consumer/setup.ts b/packages/@luke-ui/react/src/core/packed-consumer/setup.ts
index 64c4a9d2..ffc3c0fb 100644
--- a/packages/@luke-ui/react/src/core/packed-consumer/setup.ts
+++ b/packages/@luke-ui/react/src/core/packed-consumer/setup.ts
@@ -46,6 +46,8 @@ const VITE_SPEC =
  * `defineTheme` import bundles counts as theme generation.
  */
 const RUNTIME_THEME_MODULES = [
+	'@luke-ui/react/src/theme/literal-scale.ts',
+	'@luke-ui/react/src/theme/rem.ts',
 	'@luke-ui/react/src/theme/theme-class-name.ts',
 	'@luke-ui/react/src/theme/type-styles.ts',
 ];
diff --git a/packages/@luke-ui/react/src/core/primitives/button/button.test.ts b/packages/@luke-ui/react/src/core/primitives/button/button.test.ts
index 85961715..53228fde 100644
--- a/packages/@luke-ui/react/src/core/primitives/button/button.test.ts
+++ b/packages/@luke-ui/react/src/core/primitives/button/button.test.ts
@@ -13,7 +13,7 @@ test('primitive Button retains React Aria render', () => {
 test('primitive Button supports ref and rejects unsupported prop combinations', () => {
 	assertType<ButtonProps>({ ref: null });
 	// @ts-expect-error — text Buttons do not use control sizing
-	assertType<ButtonProps>({ appearance: 'text', size: 'small' });
+	assertType<ButtonProps>({ appearance: 'text', size: 'px32' });
 	// @ts-expect-error — text Buttons do not use block layout
 	assertType<ButtonProps>({ appearance: 'text', isBlock: true });
 	// @ts-expect-error — critical text Buttons do not have high prominence
diff --git a/packages/@luke-ui/react/src/core/primitives/button/button.tsx b/packages/@luke-ui/react/src/core/primitives/button/button.tsx
index 90e14c1c..06115175 100644
--- a/packages/@luke-ui/react/src/core/primitives/button/button.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/button/button.tsx
@@ -31,7 +31,7 @@ export function Button(props: ButtonProps): JSX.Element {
 		isBlock = false,
 		isDisabled = false,
 		isPending = false,
-		size = 'medium',
+		size = 'px40',
 		...restProps
 	} = props;
 
diff --git a/packages/@luke-ui/react/src/core/primitives/button/recipe.css.ts b/packages/@luke-ui/react/src/core/primitives/button/recipe.css.ts
index 8cd8303d..b704c46e 100644
--- a/packages/@luke-ui/react/src/core/primitives/button/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/button/recipe.css.ts
@@ -25,7 +25,7 @@ export const buttonRecipeInternal = recipe({
 		appearance: 'button',
 		isBlock: false,
 		prominence: 'standard',
-		size: 'medium',
+		size: 'px40',
 		tone: 'neutral',
 	},
 	variants: {
@@ -132,8 +132,8 @@ export const buttonRecipeInternal = recipe({
 			high: {},
 		},
 		size: {
-			medium: {},
-			small: {},
+			px40: {},
+			px32: {},
 		},
 		tone: {
 			critical: {},
@@ -141,8 +141,8 @@ export const buttonRecipeInternal = recipe({
 		},
 	},
 	compoundVariants: [
-		buttonSize('medium'),
-		buttonSize('small'),
+		buttonSize('px40'),
+		buttonSize('px32'),
 		{
 			// Undoes `textRecipe`'s `minInlineSize: 0`, which lets a grid or flex parent collapse the
 			// button to one character per line. Must be a compound variant: `textRecipe`'s base and
@@ -230,8 +230,8 @@ function buttonAppearance(
 	];
 }
 
-function buttonSize(size: 'medium' | 'small') {
-	const paddingInline = size === 'medium' ? vars.space.sp16 : vars.space.sp12;
+function buttonSize(size: 'px40' | 'px32') {
+	const paddingInline = size === 'px40' ? vars.space.sp16 : vars.space.sp12;
 	// The extra 1px replaces the border. Forced colours draws the border, so it uses the plain padding.
 	const inset = {
 		'@media': {
@@ -241,16 +241,16 @@ function buttonSize(size: 'medium' | 'small') {
 	};
 	return {
 		style:
-			size === 'medium'
+			size === 'px40'
 				? {
 						...inset,
-						blockSize: vars.controlSize.medium,
+						blockSize: vars.controlSize.px40,
 						fontSize: FONT_METRIC_SCALE[14].fontSize,
 						gap: vars.space.sp8,
 					}
 				: {
 						...inset,
-						blockSize: vars.controlSize.small,
+						blockSize: vars.controlSize.px32,
 						fontSize: FONT_METRIC_SCALE[12].fontSize,
 						gap: vars.space.sp4,
 						letterSpacing: FONT_METRIC_SCALE[12].letterSpacing,
diff --git a/packages/@luke-ui/react/src/core/primitives/checkbox/checkbox.tsx b/packages/@luke-ui/react/src/core/primitives/checkbox/checkbox.tsx
index 72d45d09..3075f375 100644
--- a/packages/@luke-ui/react/src/core/primitives/checkbox/checkbox.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/checkbox/checkbox.tsx
@@ -64,7 +64,7 @@ interface _CheckboxRootProps extends _CheckboxRootOmit {
 	/**
 	 * Visual size of the checkbox control.
 	 *
-	 * @default 'medium'
+	 * @default 'px20'
 	 */
 	size?: CheckboxRecipeVariants['size'];
 	/** Custom validation function run against the selection. Return a message, or `true`/`null` when valid. */
diff --git a/packages/@luke-ui/react/src/core/primitives/checkbox/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/checkbox/styles.css.ts
index d7c6cb56..749d8994 100644
--- a/packages/@luke-ui/react/src/core/primitives/checkbox/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/checkbox/styles.css.ts
@@ -189,36 +189,36 @@ const checkboxConfig = {
 		},
 	},
 	defaultVariants: {
-		size: 'medium',
+		size: 'px20',
 	},
 	variants: {
 		size: {
-			large: {
+			px24: {
 				root: {
 					vars: {
 						[checkboxControlSize]: FONT_METRIC_SCALE[20].lineHeight,
-						[checkboxGlyphSize]: ICON_SIZES.small,
-						[checkboxIndicatorSize]: ICON_SIZES.medium,
+						[checkboxGlyphSize]: ICON_SIZES.px20,
+						[checkboxIndicatorSize]: ICON_SIZES.px24,
 						[inlineFieldIndent]: `calc(${checkboxControlSize} + ${inlineControlGap})`,
 					},
 				},
 			},
-			medium: {
+			px20: {
 				root: {
 					vars: {
 						[checkboxControlSize]: FONT_METRIC_SCALE[16].lineHeight,
-						[checkboxGlyphSize]: ICON_SIZES.xsmall,
-						[checkboxIndicatorSize]: ICON_SIZES.small,
+						[checkboxGlyphSize]: ICON_SIZES.px16,
+						[checkboxIndicatorSize]: ICON_SIZES.px20,
 						[inlineFieldIndent]: `calc(${checkboxControlSize} + ${inlineControlGap})`,
 					},
 				},
 			},
-			small: {
+			px16: {
 				root: {
 					vars: {
-						[checkboxControlSize]: ICON_SIZES.small,
+						[checkboxControlSize]: ICON_SIZES.px20,
 						[checkboxGlyphSize]: FONT_METRIC_SCALE[12].fontSize,
-						[checkboxIndicatorSize]: ICON_SIZES.xsmall,
+						[checkboxIndicatorSize]: ICON_SIZES.px16,
 						[inlineFieldIndent]: `calc(${checkboxControlSize} + ${inlineControlGap})`,
 					},
 				},
diff --git a/packages/@luke-ui/react/src/core/primitives/combobox/root.tsx b/packages/@luke-ui/react/src/core/primitives/combobox/root.tsx
index 7dcf1cc8..36f93c56 100644
--- a/packages/@luke-ui/react/src/core/primitives/combobox/root.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/combobox/root.tsx
@@ -87,7 +87,7 @@ interface _ComboboxRootProps<T extends object>
 	/** Forwarded to the combobox root element. */
 	ref?: Ref<HTMLDivElement>;
 
-	/** Control size. @default 'medium' */
+	/** Control size. @default 'px40' */
 	size?: ComboboxSize;
 	/** The currently selected key (controlled). Pass `null` for no selection. */
 	value?: Key | null;
@@ -111,7 +111,7 @@ export function ComboboxRoot<T extends object>(props: ComboboxRootProps<T>): JSX
 		isRequired,
 		menuTrigger = 'focus',
 		ref,
-		size = 'medium',
+		size = 'px40',
 		...comboboxProps
 	} = props;
 	const comboBoxContext = useSlottedContext(ComboBoxContext, props.slot);
diff --git a/packages/@luke-ui/react/src/core/primitives/combobox/size-context.tsx b/packages/@luke-ui/react/src/core/primitives/combobox/size-context.tsx
index b499d645..2256bc3f 100644
--- a/packages/@luke-ui/react/src/core/primitives/combobox/size-context.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/combobox/size-context.tsx
@@ -5,7 +5,7 @@ import type { ComboboxSize } from './root.js';
 const ComboboxSizeContext = createContext<ComboboxSize | null>(null);
 
 export function useComboboxSize(size?: ComboboxSize): ComboboxSize {
-	return size ?? use(ComboboxSizeContext) ?? 'medium';
+	return size ?? use(ComboboxSizeContext) ?? 'px40';
 }
 
 export function ComboboxSizeProvider({
diff --git a/packages/@luke-ui/react/src/core/primitives/combobox/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/combobox/styles.css.ts
index 38ab0d71..6adfa914 100644
--- a/packages/@luke-ui/react/src/core/primitives/combobox/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/combobox/styles.css.ts
@@ -402,7 +402,7 @@ const comboboxConfig = {
 			whiteSpace: 'nowrap',
 		},
 	},
-	defaultVariants: { presentation: 'popover', size: 'medium' },
+	defaultVariants: { presentation: 'popover', size: 'px40' },
 	variants: {
 		presentation: {
 			popover: {},
@@ -420,18 +420,18 @@ const comboboxConfig = {
 			},
 		},
 		size: {
-			medium: {
+			px40: {
 				control: {
-					blockSize: vars.controlSize.medium,
+					blockSize: vars.controlSize.px40,
 					fontSize: FONT_METRIC_SCALE[16].fontSize,
 				},
 				textInput: {
-					blockSize: vars.controlSize.medium,
+					blockSize: vars.controlSize.px40,
 					paddingInlineEnd: vars.space.sp12,
 					paddingInlineStart: vars.space.sp12,
 				},
 				loadMoreItem: {
-					minBlockSize: vars.controlSize.medium,
+					minBlockSize: vars.controlSize.px40,
 					paddingBlock: vars.space.sp8,
 					paddingInline: vars.space.sp12,
 				},
@@ -442,25 +442,25 @@ const comboboxConfig = {
 				item: {
 					...vars.font.label,
 					fontWeight: vars.font.weight.body,
-					minBlockSize: vars.controlSize.medium,
+					minBlockSize: vars.controlSize.px40,
 					paddingBlock: vars.space.sp8,
 					paddingInline: vars.space.sp12,
 				},
 			},
-			small: {
+			px32: {
 				control: {
-					blockSize: vars.controlSize.small,
+					blockSize: vars.controlSize.px32,
 					fontSize: FONT_METRIC_SCALE[14].fontSize,
 					letterSpacing: FONT_METRIC_SCALE[14].letterSpacing,
 					lineHeight: FONT_METRIC_SCALE[14].lineHeight,
 				},
 				textInput: {
-					blockSize: vars.controlSize.small,
+					blockSize: vars.controlSize.px32,
 					paddingInlineEnd: vars.space.sp8,
 					paddingInlineStart: vars.space.sp8,
 				},
 				loadMoreItem: {
-					minBlockSize: vars.controlSize.small,
+					minBlockSize: vars.controlSize.px32,
 					paddingBlock: vars.space.sp4,
 					paddingInline: vars.space.sp8,
 				},
@@ -471,7 +471,7 @@ const comboboxConfig = {
 				item: {
 					...vars.font.label,
 					fontWeight: vars.font.weight.body,
-					minBlockSize: vars.controlSize.small,
+					minBlockSize: vars.controlSize.px32,
 					paddingBlock: vars.space.sp4,
 					paddingInline: vars.space.sp12,
 				},
@@ -490,7 +490,7 @@ const comboboxConfig = {
 				inlineSize: COMBOBOX_ACTION_SIZE,
 				paddingInline: 0,
 			},
-			variants: { size: 'medium' },
+			variants: { size: 'px40' },
 		},
 		{
 			slots: ['trigger', 'clearButton'],
@@ -499,7 +499,7 @@ const comboboxConfig = {
 				inlineSize: MIN_TARGET_SIZE,
 				paddingInline: 0,
 			},
-			variants: { size: 'small' },
+			variants: { size: 'px32' },
 		},
 	],
 } as const satisfies SlottedConfigInput;
diff --git a/packages/@luke-ui/react/src/core/primitives/field/recipe.css.ts b/packages/@luke-ui/react/src/core/primitives/field/recipe.css.ts
index 1999c009..c8a75eaf 100644
--- a/packages/@luke-ui/react/src/core/primitives/field/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/field/recipe.css.ts
@@ -34,7 +34,7 @@ const errorIconGap = vars.space.sp8;
  * the gap spans the indent exactly and the message text starts at the label's inline edge. `max()`
  * floors the rail at the icon's own size when no indent is set.
  */
-const errorIconRailInlineSize = `max(calc(${fallbackVar(fieldMessageIndent, '0px')} - ${errorIconGap}), ${ICON_SIZES.xsmall})`;
+const errorIconRailInlineSize = `max(calc(${fallbackVar(fieldMessageIndent, '0px')} - ${errorIconGap}), ${ICON_SIZES.px16})`;
 
 /**
  * Raw slotted config for the `Field` primitive.
@@ -146,12 +146,12 @@ const fieldConfig = {
 					},
 					backgroundColor: vars.color.foreground.danger.rest,
 					// The rail has no content to size it, and the mask paints only inside its box.
-					blockSize: ICON_SIZES.xsmall,
+					blockSize: ICON_SIZES.px16,
 					inlineSize: errorIconRailInlineSize,
 					maskImage: iconMaskUrls.exclamationTriangle,
 					maskPosition: 'center',
 					maskRepeat: 'no-repeat',
-					maskSize: ICON_SIZES.xsmall,
+					maskSize: ICON_SIZES.px16,
 				},
 				message: {
 					color: vars.color.foreground.danger.rest,
diff --git a/packages/@luke-ui/react/src/core/primitives/select/select.browser.test.tsx b/packages/@luke-ui/react/src/core/primitives/select/select.browser.test.tsx
index 0ab71008..d8326443 100644
--- a/packages/@luke-ui/react/src/core/primitives/select/select.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/select/select.browser.test.tsx
@@ -69,13 +69,13 @@ function SelectScene() {
 			/>
 			<ExampleSelect isInvalid label="Invalid, no message" placeholder="Choose an option" />
 			<ExampleSelect defaultValue="two" isDisabled label="Disabled" />
-			<ExampleSelect defaultValue="two" label="Small" size="small" />
+			<ExampleSelect defaultValue="two" label="Small" size="px32" />
 			<ExampleSelect
 				defaultValue="two"
 				errorMessage="Choose a different option."
 				isInvalid
 				label="Invalid small"
-				size="small"
+				size="px32"
 			/>
 			<ExampleSelect isRequired label="Required" name="required" placeholder="Choose an option" />
 		</Stack>
@@ -246,7 +246,7 @@ test('SelectRoot sets the size of the trigger and of the items', async () => {
 	render(
 		<>
 			<ExampleSelect label="Medium" />
-			<ExampleSelect label="Small" size="small" />
+			<ExampleSelect label="Small" size="px32" />
 		</>,
 	);
 
diff --git a/packages/@luke-ui/react/src/core/primitives/select/select.tsx b/packages/@luke-ui/react/src/core/primitives/select/select.tsx
index df7f0648..1d7886de 100644
--- a/packages/@luke-ui/react/src/core/primitives/select/select.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/select/select.tsx
@@ -104,7 +104,7 @@ interface _SelectRootProps extends _SelectRootOmit, SelectRootRedeclaredRACProps
 	ref?: Ref<HTMLDivElement>;
 	/**
 	 * Sets the size of the trigger, indicator, and items.
-	 * @default 'medium'
+	 * @default 'px40'
 	 */
 	size?: SelectSize;
 	/** Element id for the trigger button. The root generates one when omitted. */
@@ -184,7 +184,7 @@ export type SelectItemProps<T extends object> = Prettify<
  * `id`, `className`, and `ref` target the root element. `triggerId` targets the trigger.
  */
 export function SelectRoot(props: SelectRootProps): JSX.Element {
-	const { className, id, isRequired, size = 'medium', triggerId, ...selectProps } = props;
+	const { className, id, isRequired, size = 'px40', triggerId, ...selectProps } = props;
 	const selectContext = useSlottedContext(SelectContext, props.slot);
 	const resolvedIsRequired = isRequired ?? selectContext?.isRequired ?? false;
 	const fieldState = { isRequired: resolvedIsRequired };
@@ -213,7 +213,7 @@ export function SelectRoot(props: SelectRootProps): JSX.Element {
  */
 export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
 	const { children, className, ...buttonProps } = props;
-	const size = use(SelectSizeContext) ?? 'medium';
+	const size = use(SelectSizeContext) ?? 'px40';
 	const isRequired = use(FieldStateContext)?.isRequired ?? false;
 	const cueId = useId();
 	const buttonContext = useSlottedContext(ButtonContext, buttonProps.slot);
@@ -341,7 +341,7 @@ export function SelectListBox<T extends object>(props: SelectListBoxProps<T>): J
  * the surrounding `SelectRoot`.
  */
 export function SelectItem<T extends object>(props: SelectItemProps<T>): JSX.Element {
-	const size = use(SelectSizeContext) ?? 'medium';
+	const size = use(SelectSizeContext) ?? 'px40';
 
 	return <ComboboxItem<T> {...props} size={size} />;
 }
diff --git a/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
index 1476b629..6edc5ab3 100644
--- a/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
@@ -107,19 +107,19 @@ const selectConfig = {
 			},
 		},
 	},
-	defaultVariants: { size: 'medium' },
+	defaultVariants: { size: 'px40' },
 	variants: {
 		size: {
-			medium: {
+			px40: {
 				trigger: {
-					blockSize: vars.controlSize.medium,
+					blockSize: vars.controlSize.px40,
 					fontSize: FONT_METRIC_SCALE[16].fontSize,
 					paddingInline: vars.space.sp12,
 				},
 			},
-			small: {
+			px32: {
 				trigger: {
-					blockSize: vars.controlSize.small,
+					blockSize: vars.controlSize.px32,
 					fontSize: FONT_METRIC_SCALE[14].fontSize,
 					letterSpacing: FONT_METRIC_SCALE[14].letterSpacing,
 					lineHeight: FONT_METRIC_SCALE[14].lineHeight,
diff --git a/packages/@luke-ui/react/src/core/primitives/switch/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/switch/styles.css.ts
index b44cec32..88065bcd 100644
--- a/packages/@luke-ui/react/src/core/primitives/switch/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/switch/styles.css.ts
@@ -206,13 +206,13 @@ const switchConfig = {
 		},
 	},
 	defaultVariants: {
-		size: 'medium',
+		size: 'px20',
 	},
 	variants: {
 		size: {
-			large: { root: sizeVars(ICON_SIZES.medium) },
-			medium: { root: sizeVars(ICON_SIZES.small) },
-			small: { root: sizeVars(ICON_SIZES.xsmall) },
+			px24: { root: sizeVars(ICON_SIZES.px24) },
+			px20: { root: sizeVars(ICON_SIZES.px20) },
+			px16: { root: sizeVars(ICON_SIZES.px16) },
 		},
 	},
 } as const satisfies SlottedConfigInput;
diff --git a/packages/@luke-ui/react/src/core/primitives/switch/switch.tsx b/packages/@luke-ui/react/src/core/primitives/switch/switch.tsx
index 162b736f..0e8e4e03 100644
--- a/packages/@luke-ui/react/src/core/primitives/switch/switch.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/switch/switch.tsx
@@ -62,7 +62,7 @@ interface _SwitchRootProps extends _SwitchRootOmit {
 	/**
 	 * Visual size of the switch control.
 	 *
-	 * @default 'medium'
+	 * @default 'px20'
 	 */
 	size?: SwitchRecipeVariants['size'];
 	/** Custom validation function run against the selection. Return a message, or `true`/`null` when valid. */
diff --git a/packages/@luke-ui/react/src/core/primitives/text-input/recipe.css.ts b/packages/@luke-ui/react/src/core/primitives/text-input/recipe.css.ts
index 5254a9fa..e0dcf31b 100644
--- a/packages/@luke-ui/react/src/core/primitives/text-input/recipe.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/text-input/recipe.css.ts
@@ -85,12 +85,12 @@ export const textInputRecipe = recipe({
 		},
 	},
 	defaultVariants: {
-		size: 'medium',
+		size: 'px40',
 	},
 	variants: {
 		size: {
-			medium: {
-				blockSize: vars.controlSize.medium,
+			px40: {
+				blockSize: vars.controlSize.px40,
 				fontSize: FONT_METRIC_SCALE[16].fontSize,
 				letterSpacing: FONT_METRIC_SCALE[16].letterSpacing,
 				lineHeight: FONT_METRIC_SCALE[16].lineHeight,
@@ -98,8 +98,8 @@ export const textInputRecipe = recipe({
 				paddingInlineStart: textInputInputPaddingInline,
 				vars: { [textInputInlinePadding]: vars.space.sp12 },
 			},
-			small: {
-				blockSize: vars.controlSize.small,
+			px32: {
+				blockSize: vars.controlSize.px32,
 				fontSize: FONT_METRIC_SCALE[14].fontSize,
 				letterSpacing: FONT_METRIC_SCALE[14].letterSpacing,
 				lineHeight: FONT_METRIC_SCALE[14].lineHeight,
diff --git a/packages/@luke-ui/react/src/core/primitives/text-input/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/text-input/styles.css.ts
index c9689fbf..d8f8be55 100644
--- a/packages/@luke-ui/react/src/core/primitives/text-input/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/text-input/styles.css.ts
@@ -157,13 +157,13 @@ export const textInputPartsRecipe = recipe({
 		},
 	},
 	defaultVariants: {
-		size: 'medium',
+		size: 'px40',
 	},
 	variants: {
 		size: {
-			medium: {
+			px40: {
 				control: {
-					blockSize: vars.controlSize.medium,
+					blockSize: vars.controlSize.px40,
 					fontSize: FONT_METRIC_SCALE[16].fontSize,
 					vars: { [textInputInlinePadding]: vars.space.sp12 },
 				},
@@ -178,9 +178,9 @@ export const textInputPartsRecipe = recipe({
 					paddingInlineStart: vars.space.sp12,
 				},
 			},
-			small: {
+			px32: {
 				control: {
-					blockSize: vars.controlSize.small,
+					blockSize: vars.controlSize.px32,
 					fontSize: FONT_METRIC_SCALE[14].fontSize,
 					letterSpacing: FONT_METRIC_SCALE[14].letterSpacing,
 					lineHeight: FONT_METRIC_SCALE[14].lineHeight,
diff --git a/packages/@luke-ui/react/src/core/primitives/text-input/text-input.browser.test.tsx b/packages/@luke-ui/react/src/core/primitives/text-input/text-input.browser.test.tsx
index 4d97293a..1741255d 100644
--- a/packages/@luke-ui/react/src/core/primitives/text-input/text-input.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/text-input/text-input.browser.test.tsx
@@ -33,7 +33,7 @@ function TextInputScene() {
 		<Stack>
 			<TextInput aria-label="Standalone" defaultValue="Standalone" />
 			<TextInput aria-invalid aria-label="Standalone invalid" defaultValue="Invalid" />
-			<TextInput aria-label="Standalone small" defaultValue="Small" size="small" />
+			<TextInput aria-label="Standalone small" defaultValue="Small" size="px32" />
 			<TextInput aria-label="Standalone disabled" defaultValue="Unavailable" disabled />
 			<TextInput aria-label="Standalone read-only" defaultValue="Read only" readOnly />
 			<TextInputRoot defaultValue="nope" isInvalid name="inside-root">
@@ -56,10 +56,10 @@ function TextInputScene() {
 				</TextInputPrefix>
 				<TextInput aria-label="Search control" defaultValue="invoices" />
 				<TextInputSuffix>
-					<Button size="small">Clear</Button>
+					<Button size="px32">Clear</Button>
 				</TextInputSuffix>
 			</TextInputControl>
-			<TextInputControl size="small">
+			<TextInputControl size="px32">
 				<TextInputPrefix>$</TextInputPrefix>
 				<TextInput aria-invalid aria-label="Refund" defaultValue="-1" inputMode="decimal" />
 				<TextInputSuffix>USD</TextInputSuffix>
@@ -578,19 +578,19 @@ test('a part size overrides the root size, and a control sizes its input', () =>
 	render(
 		<>
 			<TextInput aria-label="Medium reference" />
-			<TextInput aria-label="Small reference" size="small" />
-			<TextInputRoot size="small">
+			<TextInput aria-label="Small reference" size="px32" />
+			<TextInputRoot size="px32">
 				<FieldLabel>Root small</FieldLabel>
 				<TextInput />
 			</TextInputRoot>
-			<TextInputRoot size="small">
+			<TextInputRoot size="px32">
 				<FieldLabel>Input medium</FieldLabel>
-				<TextInput size="medium" />
+				<TextInput size="px40" />
 			</TextInputRoot>
-			<TextInputRoot size="small">
+			<TextInputRoot size="px32">
 				<FieldLabel>Control medium</FieldLabel>
-				<TextInputControl size="medium">
-					<TextInput size="small" />
+				<TextInputControl size="px40">
+					<TextInput size="px32" />
 				</TextInputControl>
 			</TextInputRoot>
 		</>,
diff --git a/packages/@luke-ui/react/src/core/primitives/text-input/text-input.tsx b/packages/@luke-ui/react/src/core/primitives/text-input/text-input.tsx
index 575036aa..d5777ef0 100644
--- a/packages/@luke-ui/react/src/core/primitives/text-input/text-input.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/text-input/text-input.tsx
@@ -63,7 +63,7 @@ interface _TextInputRootProps extends _TextInputRootOmit {
 	/**
 	 * Default size for the input and any `TextInputControl` inside the root. Either part can set
 	 * its own `size`.
-	 * @default 'medium'
+	 * @default 'px40'
 	 */
 	size?: TextInputSize;
 	/** Custom validation function run against the current value. Return a message, or `true`/`null` when valid. */
@@ -138,7 +138,7 @@ interface _TextInputProps extends _TextInputOmit {
 	/**
 	 * Sets the size of the input, overriding a surrounding `TextInputRoot`. Inside a
 	 * `TextInputControl`, the control sets the size instead.
-	 * @default 'medium'
+	 * @default 'px40'
 	 */
 	size?: TextInputSize;
 	/** The type of a standalone input, such as `email`. Inside a `TextInputRoot`, set `type` on the root. */
@@ -162,7 +162,7 @@ interface _TextInputControlProps extends _TextInputControlOmit {
 	className?: RacGroupProps['className'];
 	/**
 	 * Sets the size of the whole control, overriding a surrounding `TextInputRoot`.
-	 * @default 'medium'
+	 * @default 'px40'
 	 */
 	size?: TextInputSize;
 }
@@ -189,7 +189,7 @@ export type TextInputSuffixProps = Prettify<ComponentProps<'span'>>;
  * `autoComplete`, `inputMode`, and `aria-label`, is a default that a part can override.
  */
 export function TextInputRoot(props: TextInputRootProps): JSX.Element {
-	const { className, id, inputId, isRequired, size = 'medium', ...textFieldProps } = props;
+	const { className, id, inputId, isRequired, size = 'px40', ...textFieldProps } = props;
 	const textFieldContext = useSlottedContext(TextFieldContext, props.slot);
 	const resolvedIsRequired = isRequired ?? textFieldContext?.isRequired ?? false;
 	const fieldState = { isRequired: resolvedIsRequired };
@@ -293,7 +293,7 @@ export function TextInput(props: TextInputProps): JSX.Element {
 
 				return textInputRecipe({
 					className: renderedClassName,
-					size: sizeProp ?? contextSize ?? 'medium',
+					size: sizeProp ?? contextSize ?? 'px40',
 				});
 			})}
 		/>
@@ -310,7 +310,7 @@ export function TextInput(props: TextInputProps): JSX.Element {
  */
 export function TextInputControl(props: TextInputControlProps): JSX.Element {
 	const { className, size: sizeProp, ...groupProps } = props;
-	const size = sizeProp ?? use(TextInputSizeContext) ?? 'medium';
+	const size = sizeProp ?? use(TextInputSizeContext) ?? 'px40';
 
 	return (
 		<TextInputControlContext.Provider value>
@@ -336,7 +336,7 @@ export function TextInputControl(props: TextInputControlProps): JSX.Element {
 /** Content shown at the leading end of a `TextInputControl`, such as a currency symbol. */
 export function TextInputPrefix(props: TextInputPrefixProps): JSX.Element {
 	const { className, ...spanProps } = props;
-	const size = use(TextInputSizeContext) ?? 'medium';
+	const size = use(TextInputSizeContext) ?? 'px40';
 
 	return <span {...spanProps} className={textInputPartsRecipe({ size }).prefix({ className })} />;
 }
@@ -344,7 +344,7 @@ export function TextInputPrefix(props: TextInputPrefixProps): JSX.Element {
 /** Content shown at the trailing end of a `TextInputControl`, such as a unit or a button. */
 export function TextInputSuffix(props: TextInputSuffixProps): JSX.Element {
 	const { className, ...spanProps } = props;
-	const size = use(TextInputSizeContext) ?? 'medium';
+	const size = use(TextInputSizeContext) ?? 'px40';
 
 	return <span {...spanProps} className={textInputPartsRecipe({ size }).suffix({ className })} />;
 }
diff --git a/packages/@luke-ui/react/src/core/select-field/select-field.browser.test.tsx b/packages/@luke-ui/react/src/core/select-field/select-field.browser.test.tsx
index cba7b11c..8d7fe0ee 100644
--- a/packages/@luke-ui/react/src/core/select-field/select-field.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/select-field/select-field.browser.test.tsx
@@ -89,7 +89,7 @@ function SelectFieldScene() {
 			>
 				{renderThemeItem}
 			</SelectField>
-			<SelectField defaultValue="light" items={themeItems} label="Small" name="small" size="small">
+			<SelectField defaultValue="light" items={themeItems} label="Small" name="small" size="px32">
 				{renderThemeItem}
 			</SelectField>
 			<SelectField
@@ -98,7 +98,7 @@ function SelectFieldScene() {
 				items={themeItems}
 				label="Invalid small"
 				name="invalid-small"
-				size="small"
+				size="px32"
 			>
 				{renderThemeItem}
 			</SelectField>
diff --git a/packages/@luke-ui/react/src/core/sizing/button-sizing.ts b/packages/@luke-ui/react/src/core/sizing/button-sizing.ts
index cc46cc04..ea671eb0 100644
--- a/packages/@luke-ui/react/src/core/sizing/button-sizing.ts
+++ b/packages/@luke-ui/react/src/core/sizing/button-sizing.ts
@@ -1,4 +1,4 @@
 import type { IconSize } from '../types/icon-size.js';
 
-/** Icon/spinner size used inside buttons. Both button sizes take a 16px (`1rem`) icon. */
-export const BUTTON_ICON_SIZE: IconSize = 'xsmall';
+/** Icon/spinner size used inside buttons. Both button sizes take a 16px (`px16`) icon. */
+export const BUTTON_ICON_SIZE: IconSize = 'px16';
diff --git a/packages/@luke-ui/react/src/core/sizing/combobox-sizing.ts b/packages/@luke-ui/react/src/core/sizing/combobox-sizing.ts
index 00e9713e..5c9e8ccb 100644
--- a/packages/@luke-ui/react/src/core/sizing/combobox-sizing.ts
+++ b/packages/@luke-ui/react/src/core/sizing/combobox-sizing.ts
@@ -1,11 +1,11 @@
 import type { IconSize } from '../types/icon-size.js';
 
 /**
- * Size of the selected-item check icon. The check sits beside option text
- * rather than scaling with the control, so it stays fixed at both combobox
- * sizes instead of following `FIELD_CONTROL_ICON_SIZE`.
+ * Size of the check icon on a selected Combobox item. Always 16px, even when the surrounding
+ * control is larger — intentional exception that keeps the glyph from following
+ * `FIELD_CONTROL_ICON_SIZE`.
  */
-export const COMBOBOX_CHECK_ICON_SIZE: IconSize = 'xsmall';
+export const COMBOBOX_CHECK_ICON_SIZE: IconSize = 'px16';
 
 /** Square size of the medium Combobox trigger and clear button: 28px, and never below 24px. */
 export const COMBOBOX_ACTION_SIZE = 'max(1.75rem, 24px)';
diff --git a/packages/@luke-ui/react/src/core/sizing/control-size.ts b/packages/@luke-ui/react/src/core/sizing/control-size.ts
index 85251336..f664684a 100644
--- a/packages/@luke-ui/react/src/core/sizing/control-size.ts
+++ b/packages/@luke-ui/react/src/core/sizing/control-size.ts
@@ -12,12 +12,15 @@ import type { IconSize } from '../types/icon-size.js';
  * `TextInputSize` (`primitives/text-input/recipe.css.ts`) derive from their recipe configs and must
  * stay equal to this union.
  */
-export type FieldControlSize = 'medium' | 'small';
+export type FieldControlSize = 'px32' | 'px40';
 
-/** Maps field control size to the icon size those controls provide. */
+/**
+ * Maps field control size to the icon size those controls provide: `px16` icons at `px32`, and
+ * `px20` icons at `px40`.
+ */
 export const FIELD_CONTROL_ICON_SIZE: Record<FieldControlSize, IconSize> = {
-	medium: 'small',
-	small: 'xsmall',
+	px32: 'px16',
+	px40: 'px20',
 };
 
 /**
diff --git a/packages/@luke-ui/react/src/core/sizing/icon-sizing.test.ts b/packages/@luke-ui/react/src/core/sizing/icon-sizing.test.ts
new file mode 100644
index 00000000..04a7ff2e
--- /dev/null
+++ b/packages/@luke-ui/react/src/core/sizing/icon-sizing.test.ts
@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { literalScale } from '../../theme/literal-scale.js';
+import { ICON_SIZES } from './icon-sizing.js';
+
+describe('ICON_SIZES', () => {
+	it('matches literalScale so keys cannot drift from rem values', () => {
+		expect(ICON_SIZES).toEqual(literalScale('px', [16, 20, 24, 32] as const));
+	});
+});
diff --git a/packages/@luke-ui/react/src/core/sizing/icon-sizing.ts b/packages/@luke-ui/react/src/core/sizing/icon-sizing.ts
index 12d6a699..cfcbdb4d 100644
--- a/packages/@luke-ui/react/src/core/sizing/icon-sizing.ts
+++ b/packages/@luke-ui/react/src/core/sizing/icon-sizing.ts
@@ -1,3 +1,4 @@
+import { literalScale } from '../../theme/literal-scale.js';
 import type { IconSize } from '../types/icon-size.js';
 
 /** Shared viewBox size for icon SVGs. */
@@ -19,12 +20,11 @@ export const SPINNER_STROKE_WIDTH = 2;
 export const SPINNER_CIRCLE_RADIUS = (ICON_CONTENT_SIZE - SPINNER_STROKE_WIDTH) / 2;
 
 /**
- * Inline and block size for each `Icon` size step, at a 16px root: 16, 20, 24, and 32px. Private
- * geometry: components size their own icon slots from it.
+ * Inline and block size for each `Icon` size step. Keys and `rem` values come from the same
+ * numbers at a 16px root: 16, 20, 24, and 32px. Private geometry: components size their own icon
+ * slots from it.
  */
-export const ICON_SIZES = {
-	xsmall: '1rem',
-	small: '1.25rem',
-	medium: '1.5rem',
-	large: '2rem',
-} as const satisfies Record<IconSize, string>;
+export const ICON_SIZES = literalScale('px', [16, 20, 24, 32] as const) satisfies Record<
+	IconSize,
+	string
+>;
diff --git a/packages/@luke-ui/react/src/core/styles/global-styles.browser.test.tsx b/packages/@luke-ui/react/src/core/styles/global-styles.browser.test.tsx
index b63792db..58852be0 100644
--- a/packages/@luke-ui/react/src/core/styles/global-styles.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/styles/global-styles.browser.test.tsx
@@ -170,7 +170,7 @@ test('lets Luke UI components keep their own appearance beside native markup', (
 	expect(button.borderTopWidth).toBe('0px');
 });
 
-for (const size of ['medium', 'small'] as const) {
+for (const size of ['px40', 'px32'] as const) {
 	test(`gives a ${size} Button, IconButton, and button Link one box model without user agent padding`, () => {
 		const { locator } = render(
 			<div>
diff --git a/packages/@luke-ui/react/src/core/styles/recipe.browser.test.ts b/packages/@luke-ui/react/src/core/styles/recipe.browser.test.ts
index 4ba02e7f..ca2a7872 100644
--- a/packages/@luke-ui/react/src/core/styles/recipe.browser.test.ts
+++ b/packages/@luke-ui/react/src/core/styles/recipe.browser.test.ts
@@ -86,11 +86,11 @@ test('slot functions append a consumer className', () => {
 });
 
 test('textInputRecipe styles a standalone input and appends a consumer className', () => {
-	const medium = textInputRecipe({ size: 'medium' });
+	const medium = textInputRecipe({ size: 'px40' });
 
 	expect(textInputRecipe()).toBe(medium);
-	expect(textInputRecipe({ size: 'small' })).not.toBe(medium);
-	expect(textInputRecipe({ className: 'mine', size: 'medium' })).toBe(`${medium} mine`);
+	expect(textInputRecipe({ size: 'px32' })).not.toBe(medium);
+	expect(textInputRecipe({ className: 'mine', size: 'px40' })).toBe(`${medium} mine`);
 });
 
 test('an unconditional compoundSlots entry applies to every listed slot and not to unlisted ones', () => {
diff --git a/packages/@luke-ui/react/src/core/styles/stylesheet-contract.browser.test.tsx b/packages/@luke-ui/react/src/core/styles/stylesheet-contract.browser.test.tsx
index 7ed9ac51..b19c4762 100644
--- a/packages/@luke-ui/react/src/core/styles/stylesheet-contract.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/styles/stylesheet-contract.browser.test.tsx
@@ -105,7 +105,7 @@ test('builds the public stylesheet with the layer and global-rule contract', ()
 	// Chromium folds the prefix away in cssText above. Assert the raw file so Safari's form cannot
 	// disappear while the contract still passes.
 	expect(builtCss).toContain('-webkit-text-size-adjust: 100%');
-	expectOwnedBy(rules, iconRecipe({ size: 'medium' }).split(' '), 'luke-ui.recipes');
+	expectOwnedBy(rules, iconRecipe({ size: 'px24' }).split(' '), 'luke-ui.recipes');
 });
 
 test('puts utility props in the utilities layer', () => {
diff --git a/packages/@luke-ui/react/src/core/switch-field/switch-field.browser.test.tsx b/packages/@luke-ui/react/src/core/switch-field/switch-field.browser.test.tsx
index 26b09cfb..52577a6a 100644
--- a/packages/@luke-ui/react/src/core/switch-field/switch-field.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/switch-field/switch-field.browser.test.tsx
@@ -38,7 +38,7 @@ function SwitchScene() {
 				description="Receive updates by email."
 				label="Email notifications"
 				name="description-small"
-				size="small"
+				size="px16"
 			/>
 			<SwitchField
 				defaultSelected
@@ -50,7 +50,7 @@ function SwitchScene() {
 				description="Receive updates by email."
 				label="Email notifications"
 				name="description-large"
-				size="large"
+				size="px24"
 			/>
 			<Text elementType="div" typography="heading3">
 				<SwitchField
diff --git a/packages/@luke-ui/react/src/core/text-input-field/text-input-field.browser.test.tsx b/packages/@luke-ui/react/src/core/text-input-field/text-input-field.browser.test.tsx
index 64875a1a..a179bc4d 100644
--- a/packages/@luke-ui/react/src/core/text-input-field/text-input-field.browser.test.tsx
+++ b/packages/@luke-ui/react/src/core/text-input-field/text-input-field.browser.test.tsx
@@ -28,7 +28,7 @@ function TextInputFieldScene() {
 				label="Small"
 				name="small"
 				placeholder="Small"
-				size="small"
+				size="px32"
 			/>
 			<TextInputField
 				description="Medium control size."
@@ -36,7 +36,7 @@ function TextInputFieldScene() {
 				label="Medium"
 				name="medium"
 				placeholder="Medium"
-				size="medium"
+				size="px40"
 			/>
 			<TextInputField label="Amount" name="amount" placeholder="0.00" prefix="$" />
 			<TextInputField label="Total" name="total" placeholder="0.00" suffix="USD" />
@@ -53,7 +53,7 @@ function TextInputFieldScene() {
 				errorMessage="Please enter a valid email."
 				label="Invalid small"
 				name="invalid-small"
-				size="small"
+				size="px32"
 			/>
 			<TextInputField
 				defaultValue="0.00"
diff --git a/packages/@luke-ui/react/src/core/text-input-field/text-input-field.tsx b/packages/@luke-ui/react/src/core/text-input-field/text-input-field.tsx
index 33643594..0ce0a33e 100644
--- a/packages/@luke-ui/react/src/core/text-input-field/text-input-field.tsx
+++ b/packages/@luke-ui/react/src/core/text-input-field/text-input-field.tsx
@@ -52,7 +52,7 @@ interface _TextInputFieldBaseProps extends _TextInputFieldOmit, DocumentedInputP
 	prefix?: ReactNode;
 	/** Forwarded to the field's root element. Use `inputRef` for the input. */
 	ref?: TextInputRootProps['ref'];
-	/** Control size. @default 'medium' */
+	/** Control size. @default 'px40' */
 	size?: TextInputSize;
 	/** Element shown after the input value. */
 	suffix?: ReactNode;
@@ -79,7 +79,7 @@ export function TextInputField(props: TextInputFieldProps): JSX.Element {
 		necessityIndicator,
 		placeholder,
 		prefix,
-		size = 'medium',
+		size = 'px40',
 		suffix,
 		...rootProps
 	} = props;
diff --git a/packages/@luke-ui/react/src/core/types/icon-size.ts b/packages/@luke-ui/react/src/core/types/icon-size.ts
index 5c1b6a50..e343416d 100644
--- a/packages/@luke-ui/react/src/core/types/icon-size.ts
+++ b/packages/@luke-ui/react/src/core/types/icon-size.ts
@@ -1,2 +1,2 @@
-/** Semantic icon-size steps shared by icon-sized components. */
-export type IconSize = 'xsmall' | 'small' | 'medium' | 'large';
+/** Literal icon-size steps shared by icon-sized components. */
+export type IconSize = 'px16' | 'px20' | 'px24' | 'px32';
diff --git a/packages/@luke-ui/react/src/theme/contract.test.ts b/packages/@luke-ui/react/src/theme/contract.test.ts
index 576de2f5..4f9b64e1 100644
--- a/packages/@luke-ui/react/src/theme/contract.test.ts
+++ b/packages/@luke-ui/react/src/theme/contract.test.ts
@@ -125,7 +125,7 @@ describe('theme contract', () => {
 			'focus',
 		]);
 		expect(Object.keys(vars.controlFinish)).toEqual(['recessed', 'resting', 'raised']);
-		expect(Object.keys(vars.controlSize)).toEqual(['small', 'medium']);
+		expect(Object.keys(vars.controlSize)).toEqual(['px32', 'px40']);
 		for (const style of typeStyles) {
 			expect(Object.keys(vars.font[style]).sort()).toEqual([
 				'fontFamily',
diff --git a/packages/@luke-ui/react/src/theme/contract.ts b/packages/@luke-ui/react/src/theme/contract.ts
index aee43d9d..c96ead7e 100644
--- a/packages/@luke-ui/react/src/theme/contract.ts
+++ b/packages/@luke-ui/react/src/theme/contract.ts
@@ -61,7 +61,8 @@ const fontStyleContract = Object.fromEntries(
 
 /**
  * Fixed spacing values selected from a 4px scale. Keys encode their step; values are emitted as
- * `rem` (16 → 1rem).
+ * `rem` (16 → 1rem). Temporary `sp*` naming — migrate to `literalScale('px', …)` before the next
+ * release (#847).
  */
 export const spaceScale = [
 	['sp4', rem(4)],
@@ -183,10 +184,10 @@ export const themeContractTree = {
 	},
 	/** The fixed spacing scale used by components and layout utilities. */
 	space: spaceContract,
-	/** Structural block sizes for small and medium controls. */
+	/** Structural block sizes for `px32` and `px40` controls. */
 	controlSize: {
-		small: null,
-		medium: null,
+		px32: null,
+		px40: null,
 	},
 	/** Interaction treatment shared by every control recipe. */
 	interaction: {
diff --git a/packages/@luke-ui/react/src/theme/literal-scale.test.ts b/packages/@luke-ui/react/src/theme/literal-scale.test.ts
new file mode 100644
index 00000000..6a04a673
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/literal-scale.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, expectTypeOf, it } from 'vite-plus/test';
+import { literalScale } from './literal-scale.js';
+import { rem } from './rem.js';
+
+describe('literalScale', () => {
+	it('derives px keys and rem values from the same numbers', () => {
+		const scale = literalScale('px', [16, 20, 24, 32] as const);
+
+		expect(scale).toEqual({
+			px16: rem(16),
+			px20: rem(20),
+			px24: rem(24),
+			px32: rem(32),
+		});
+		expect(Object.keys(scale)).toEqual(['px16', 'px20', 'px24', 'px32']);
+	});
+
+	it('keeps key unions tied to the numeric steps', () => {
+		const scale = literalScale('px', [32, 40] as const);
+
+		expectTypeOf(scale).toEqualTypeOf<{
+			readonly px32: `${string}rem`;
+			readonly px40: `${string}rem`;
+		}>();
+		expectTypeOf<keyof typeof scale>().toEqualTypeOf<'px32' | 'px40'>();
+	});
+
+	it('accepts another prefix so spacing can reuse the same helper', () => {
+		const scale = literalScale('sp', [4, 8] as const);
+
+		expect(scale).toEqual({
+			sp4: rem(4),
+			sp8: rem(8),
+		});
+		expectTypeOf(scale).toEqualTypeOf<{
+			readonly sp4: `${string}rem`;
+			readonly sp8: `${string}rem`;
+		}>();
+	});
+});
diff --git a/packages/@luke-ui/react/src/theme/literal-scale.ts b/packages/@luke-ui/react/src/theme/literal-scale.ts
new file mode 100644
index 00000000..b7b27567
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/literal-scale.ts
@@ -0,0 +1,22 @@
+import { rem } from './rem.js';
+
+type LiteralKey<Prefix extends string, Step extends number> = `${Prefix}${Step}`;
+
+/**
+ * Builds a curated literal size scale from numeric steps. Each step becomes both the key and the
+ * `rem` value at a 16px root (`16` → `px16: rem(16)`), so names cannot drift from values.
+ *
+ * The prefix names the kind of value (`px` for fixed lengths). Spacing still uses hand-written
+ * `sp*` entries today; migrate it through this helper before the next release (#847).
+ */
+export function literalScale<
+	const Prefix extends string,
+	const Steps extends ReadonlyArray<number>,
+>(
+	prefix: Prefix,
+	steps: Steps,
+): { readonly [Step in Steps[number] as LiteralKey<Prefix, Step>]: `${string}rem` } {
+	return Object.fromEntries(steps.map((step) => [`${prefix}${step}`, rem(step)])) as {
+		readonly [Step in Steps[number] as LiteralKey<Prefix, Step>]: `${string}rem`;
+	};
+}
diff --git a/packages/@luke-ui/react/src/theme/rem.ts b/packages/@luke-ui/react/src/theme/rem.ts
index 43514fda..4b693a11 100644
--- a/packages/@luke-ui/react/src/theme/rem.ts
+++ b/packages/@luke-ui/react/src/theme/rem.ts
@@ -1,6 +1,6 @@
 /**
  * Converts a value at a 16px root to `rem` (16 → 1rem).
- * Private to the theme pipeline — not a public API.
+ * Shared by theme generation and runtime literal scales — not a public API.
  */
 export function rem(pixels: number): `${string}rem` {
 	return `${formatRemNumber(pixels / 16)}rem`;
diff --git a/packages/@luke-ui/react/src/theme/token-values.test.ts b/packages/@luke-ui/react/src/theme/token-values.test.ts
new file mode 100644
index 00000000..67497757
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/token-values.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { literalScale } from './literal-scale.js';
+import { CONTROL_SIZE_VALUES } from './token-values.js';
+
+describe('CONTROL_SIZE_VALUES', () => {
+	it('derives controlSize paths from literalScale', () => {
+		const scale = literalScale('px', [32, 40] as const);
+
+		expect(CONTROL_SIZE_VALUES).toEqual({
+			'controlSize.px32': scale.px32,
+			'controlSize.px40': scale.px40,
+		});
+	});
+});
diff --git a/packages/@luke-ui/react/src/theme/token-values.ts b/packages/@luke-ui/react/src/theme/token-values.ts
index fe09e5c8..eb548ae8 100644
--- a/packages/@luke-ui/react/src/theme/token-values.ts
+++ b/packages/@luke-ui/react/src/theme/token-values.ts
@@ -9,19 +9,22 @@
 
 import type { IdentityPath } from './contract.js';
 import { FONT_METRIC_SCALE } from './font-metric-scale.js';
+import { literalScale } from './literal-scale.js';
 import { MOTION_DURATION_SCALE } from './motion.js';
 import { pathEntry, pathRecord } from './path-record.js';
-import { rem } from './rem.js';
 import type { TypeStyle } from './type-styles.js';
 import { typeStyleMetricStep, typeStyles } from './type-styles.js';
 
-/** Structural block sizes for the small and medium controls. */
+const controlSizeScale = literalScale('px', [32, 40] as const);
+
+/** Structural block sizes for the `px32` and `px40` controls. */
 export const CONTROL_SIZE_VALUES: {
 	[Path in Extract<IdentityPath, `controlSize.${string}`>]: string;
-} = {
-	'controlSize.medium': rem(40),
-	'controlSize.small': rem(32),
-};
+} = pathRecord(
+	(Object.keys(controlSizeScale) as Array<keyof typeof controlSizeScale>).map((key) =>
+		pathEntry(`controlSize.${key}`, controlSizeScale[key]),
+	),
+);
 
 type FontValueLeaf = 'fontSize' | 'letterSpacing' | 'lineHeight';
 type FontValueKey = `font.${TypeStyle}.${FontValueLeaf}`;