From c0fd0052823844d2af8d7acd330c85954ee22812 Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Sat, 17 Oct 2026 22:07:11 +1100
Subject: [PATCH] Replace T-shirt sizes with literal px scales (#859)

* Replace T-shirt size keys with curated px literal scales

Introduce literalScale so fixed measurements derive both the key and rem
value from the same numbers, then migrate control, icon, indicator, and
Container size APIs to px* keys with no geometry changes.

Co-authored-by: Luke Bennett <hello@lukebennett.com.au>

* Fix font-size preference selector and derive controlSize from literalScale

Restore data-font-size="small" in the reference app (unrelated to component
sizing), cover Small and Large text-size geometry in the browser test, and
build CONTROL_SIZE_VALUES from literalScale so keys cannot drift from rem.

Co-authored-by: Luke Bennett <hello@lukebennett.com.au>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
---
 .../docs/components/actions/button.mdx        |  4 +-
 .../docs/components/actions/icon-button.mdx   |  2 +-
 .../docs/components/actions/icon-link.mdx     |  2 +-
 .../components/feedback/loading-spinner.mdx   |  2 +-
 .../docs/components/forms/checkbox-field.mdx  |  4 +-
 .../docs/components/forms/combobox-field.mdx  |  2 +-
 .../docs/components/forms/select-field.mdx    |  2 +-
 .../docs/components/forms/switch-field.mdx    |  2 +-
 .../components/forms/text-input-field.mdx     |  2 +-
 .../docs/components/layout/container.mdx      |  6 +--
 .../docs/components/primitives/select.mdx     |  4 +-
 .../docs/components/primitives/text-input.mdx |  6 +--
 apps/docs/content/docs/docs/iconography.mdx   |  6 +--
 apps/docs/content/docs/docs/styling.mdx       |  2 +-
 .../components/code-block/code-block.css.ts   |  4 +-
 .../src/components/code-block/code-block.tsx  |  2 +-
 .../src/components/component-props-table.tsx  |  2 +-
 .../components/docs-article/docs-pager.tsx    |  2 +-
 .../src/components/docs-article/docs-toc.tsx  |  2 +-
 .../components/docs-article/mdx-elements.tsx  |  2 +-
 apps/docs/src/components/docs-site-nav.tsx    |  4 +-
 apps/docs/src/components/example-block.tsx    |  9 +----
 .../src/components/example-code-preview.tsx   |  2 +-
 apps/docs/src/components/icon-gallery.tsx     | 16 ++++----
 apps/docs/src/components/motion-tokens.tsx    |  2 +-
 apps/docs/src/components/not-found.tsx        |  2 +-
 apps/docs/src/components/page-actions.tsx     |  4 +-
 .../components/playground/editor-skeleton.tsx |  2 +-
 .../docs/src/components/playground/editor.tsx |  2 +-
 .../playground/icon-toggle-button-group.tsx   |  4 +-
 .../components/playground/playground.css.ts   |  2 +-
 .../components/playground/preview-toolbar.tsx |  2 +-
 apps/docs/src/components/search-dialog.tsx    |  6 +--
 apps/docs/src/components/search.tsx           |  4 +-
 apps/docs/src/components/site-nav.tsx         |  4 +-
 .../src/components/token-reference-parts.tsx  |  2 +-
 apps/docs/src/components/token-scales.tsx     |  4 +-
 apps/docs/src/components/type-popover.tsx     |  2 +-
 .../docs/src/components/typography-tokens.tsx |  2 +-
 apps/docs/src/examples/aspect-ratio/basic.tsx |  2 +-
 .../aspect-ratio/semantic-element.tsx         |  2 +-
 apps/docs/src/examples/button/sizes.tsx       |  8 ++--
 .../src/examples/checkbox-field/sizes.tsx     | 12 +++---
 .../src/examples/combobox-field/sizes.tsx     |  8 ++--
 apps/docs/src/examples/container/basic.tsx    |  2 +-
 .../examples/container/semantic-element.tsx   |  2 +-
 apps/docs/src/examples/icon-button/size.tsx   |  8 ++--
 apps/docs/src/examples/icon-link/size.tsx     |  8 ++--
 apps/docs/src/examples/icon/custom.tsx        |  2 +-
 apps/docs/src/examples/icon/decorative.tsx    |  2 +-
 apps/docs/src/examples/icon/size-context.tsx  |  2 +-
 apps/docs/src/examples/icon/sizes.tsx         | 16 ++++----
 .../src/examples/loading-spinner/sizes.tsx    | 16 ++++----
 apps/docs/src/examples/lockup/basic.tsx       |  2 +-
 apps/docs/src/examples/lockup/interactive.tsx |  2 +-
 apps/docs/src/examples/select-field/sizes.tsx |  8 ++--
 apps/docs/src/examples/switch-field/sizes.tsx | 12 +++---
 .../text-input-field/prefix-and-suffix.tsx    |  2 +-
 .../src/examples/text-input-field/sizes.tsx   |  8 ++--
 apps/docs/src/routes/index.tsx                |  2 +-
 .../src/samples/styling/component-props.tsx   |  2 +-
 apps/reference-app/src/app.browser.test.tsx   | 16 +++++++-
 .../src/components/change-email-dialog.tsx    |  4 +-
 .../src/components/profile-avatar-section.tsx |  8 ++--
 .../src/components/profile-text-field.tsx     |  2 +-
 .../src/components/settings-nav.tsx           |  6 +--
 apps/reference-app/src/routes/app-routes.tsx  |  2 +-
 apps/reference-app/src/routes/home.tsx        |  2 +-
 apps/reference-app/src/routes/preferences.tsx |  2 +-
 .../src/routes/settings-layout.tsx            |  6 +--
 docs/STYLING.md                               | 30 +++++++++++++-
 .../react/src/core/action-presentation.ts     | 16 ++++----
 .../src/core/button/button.browser.test.tsx   |  2 +-
 .../react/src/core/button/button.test.ts      |  2 +-
 .../react/src/core/button/recipe.css.ts       |  2 +-
 .../checkbox-field.browser.test.tsx           |  4 +-
 .../combobox-field.browser.test.tsx           | 12 +++---
 .../core/combobox-field/combobox-field.tsx    |  8 ++--
 .../core/container/container.browser.test.tsx | 22 +++++-----
 .../src/core/container/container.test.ts      |  6 +--
 .../react/src/core/container/recipe.css.ts    | 22 +++++-----
 .../react/src/core/grid/grid.browser.test.tsx |  2 +-
 .../icon-button/icon-button.browser.test.tsx  |  8 ++--
 .../src/core/icon-button/icon-button.tsx      |  2 +-
 .../react/src/core/icon-button/recipe.css.ts  |  8 ++--
 .../react/src/core/icon-button/styles.css.ts  |  4 +-
 .../core/icon-link/icon-link.browser.test.tsx | 10 ++---
 .../react/src/core/icon-link/icon-link.tsx    |  2 +-
 .../react/src/core/icon/icon.browser.test.tsx |  2 +-
 .../@luke-ui/react/src/core/icon/icon.tsx     |  4 +-
 .../react/src/core/icon/recipe.css.ts         | 26 ++++++------
 .../@luke-ui/react/src/core/link/link.test.ts |  2 +-
 .../react/src/core/link/recipe.css.ts         |  2 +-
 .../loading-spinner.browser.test.tsx          |  2 +-
 .../core/loading-spinner/loading-spinner.tsx  |  4 +-
 .../src/core/loading-spinner/recipe.css.ts    | 10 ++---
 .../src/core/packed-consumer/react-fixture.ts |  4 +-
 .../react/src/core/packed-consumer/setup.ts   |  2 +
 .../src/core/primitives/button/button.test.ts |  2 +-
 .../src/core/primitives/button/button.tsx     |  2 +-
 .../src/core/primitives/button/recipe.css.ts  | 20 +++++-----
 .../src/core/primitives/checkbox/checkbox.tsx |  2 +-
 .../core/primitives/checkbox/styles.css.ts    | 20 +++++-----
 .../src/core/primitives/combobox/root.tsx     |  4 +-
 .../core/primitives/combobox/size-context.tsx |  2 +-
 .../core/primitives/combobox/styles.css.ts    | 26 ++++++------
 .../src/core/primitives/field/recipe.css.ts   |  6 +--
 .../primitives/select/select.browser.test.tsx |  6 +--
 .../src/core/primitives/select/select.tsx     |  8 ++--
 .../src/core/primitives/select/styles.css.ts  | 10 ++---
 .../src/core/primitives/switch/styles.css.ts  |  8 ++--
 .../src/core/primitives/switch/switch.tsx     |  2 +-
 .../core/primitives/text-input/recipe.css.ts  | 10 ++---
 .../core/primitives/text-input/styles.css.ts  | 10 ++---
 .../text-input/text-input.browser.test.tsx    | 20 +++++-----
 .../core/primitives/text-input/text-input.tsx | 16 ++++----
 .../select-field.browser.test.tsx             |  4 +-
 .../react/src/core/sizing/button-sizing.ts    |  4 +-
 .../react/src/core/sizing/combobox-sizing.ts  |  8 ++--
 .../react/src/core/sizing/control-size.ts     | 11 +++--
 .../react/src/core/sizing/icon-sizing.test.ts |  9 +++++
 .../react/src/core/sizing/icon-sizing.ts      | 16 ++++----
 .../styles/global-styles.browser.test.tsx     |  2 +-
 .../src/core/styles/recipe.browser.test.ts    |  6 +--
 .../stylesheet-contract.browser.test.tsx      |  2 +-
 .../switch-field.browser.test.tsx             |  4 +-
 .../text-input-field.browser.test.tsx         |  6 +--
 .../text-input-field/text-input-field.tsx     |  4 +-
 .../react/src/core/types/icon-size.ts         |  4 +-
 .../@luke-ui/react/src/theme/contract.test.ts |  2 +-
 packages/@luke-ui/react/src/theme/contract.ts |  9 +++--
 .../react/src/theme/literal-scale.test.ts     | 40 +++++++++++++++++++
 .../@luke-ui/react/src/theme/literal-scale.ts | 22 ++++++++++
 packages/@luke-ui/react/src/theme/rem.ts      |  2 +-
 .../react/src/theme/token-values.test.ts      | 14 +++++++
 .../@luke-ui/react/src/theme/token-values.ts  | 15 ++++---
 136 files changed, 507 insertions(+), 382 deletions(-)
 create mode 100644 packages/@luke-ui/react/src/core/sizing/icon-sizing.test.ts
 create mode 100644 packages/@luke-ui/react/src/theme/literal-scale.test.ts
 create mode 100644 packages/@luke-ui/react/src/theme/literal-scale.ts
 create mode 100644 packages/@luke-ui/react/src/theme/token-values.test.ts

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}`;
-- 
2.51.2