From b4418fc15cb65ae158d5316e06a7af1dea411e57 Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Wed, 15 Jul 2026 16:15:11 +1000
Subject: [PATCH] Rebuild styling entrypoints and add Box (#119)

---
 README.md                                     |   3 +-
 .../components/feedback/loading-spinner.mdx   |   2 +-
 .../content/docs/components/layout/box.mdx    |  37 +
 .../content/docs/components/layout/meta.json  |   4 +
 apps/docs/content/docs/components/meta.json   |   2 +-
 .../src/examples/box/responsive-layout.tsx    |  17 +
 docs/STYLING.md                               |  73 +-
 knip.config.ts                                |   1 -
 .../@luke-ui/rainbow-sprinkles/src/types.ts   |  13 +-
 packages/@luke-ui/react/AGENTS.md             |  28 +
 packages/@luke-ui/react/README.md             |   8 +-
 .../react/icons/{critical.svg => danger.svg}  |   0
 .../react/icons/{informative.svg => info.svg} |   0
 .../react/icons/{caution.svg => warning.svg}  |   0
 packages/@luke-ui/react/package.json          |   6 +-
 .../react/scripts/generate-color-tokens.ts    | 173 ----
 .../react/scripts/visual-regression-lib.ts    |   7 +-
 .../react/src/box/box.browser.test.tsx        |  79 ++
 .../@luke-ui/react/src/box/box.stories.tsx    |  62 ++
 packages/@luke-ui/react/src/box/box.test.ts   |  28 +
 packages/@luke-ui/react/src/box/index.tsx     |  46 +
 .../react/src/button/button.stories.tsx       |   4 +-
 .../react/src/button/button.visual.test.tsx   |   8 +-
 packages/@luke-ui/react/src/button/index.tsx  |  15 +-
 .../react/src/button/primitive/index.tsx      |   6 +-
 .../react/src/combobox-field/index.tsx        |  25 +-
 .../combobox-field/primitive/clear-button.tsx |  15 +-
 .../src/combobox-field/primitive/control.tsx  |  12 +-
 .../combobox-field/primitive/empty-state.tsx  |  11 +-
 .../src/combobox-field/primitive/input.tsx    |  15 +-
 .../src/combobox-field/primitive/item.tsx     |  30 +-
 .../src/combobox-field/primitive/listbox.tsx  |  19 +-
 .../src/combobox-field/primitive/popover.tsx  |  13 +-
 .../src/combobox-field/primitive/root.tsx     |  19 +-
 .../src/combobox-field/primitive/section.tsx  |  19 +-
 .../src/combobox-field/primitive/trigger.tsx  |  12 +-
 packages/@luke-ui/react/src/emoji/index.tsx   |  16 +-
 .../@luke-ui/react/src/field/compose-field.ts |  11 +-
 .../react/src/field/primitive/description.tsx |   9 +-
 .../react/src/field/primitive/error.tsx       |   8 +-
 .../react/src/field/primitive/index.tsx       |  11 +-
 .../react/src/field/primitive/label.tsx       |   6 +-
 packages/@luke-ui/react/src/heading/index.tsx |  11 +-
 .../@luke-ui/react/src/icon-button/index.tsx  |  18 +-
 .../react/src/icon-size-context/index.tsx     |   8 +-
 .../@luke-ui/react/src/icon/icon.stories.tsx  |   2 +-
 .../react/src/icon/icon.visual.test.tsx       |   2 +-
 packages/@luke-ui/react/src/icon/index.tsx    |  26 +-
 packages/@luke-ui/react/src/link/index.tsx    |  12 +-
 .../react/src/loading-skeleton/index.tsx      |  15 +-
 .../react/src/loading-spinner/index.tsx       |  40 +-
 packages/@luke-ui/react/src/numeral/index.tsx |  31 +-
 .../react/src/recipes/button-composed.css.ts  |   7 +-
 packages/@luke-ui/react/src/recipes/index.ts  |   2 +-
 .../react/src/sizing/button-sizing.ts         |   4 +-
 .../react/src/sizing/combobox-sizing.ts       |   4 +-
 .../@luke-ui/react/src/styles/index.css.ts    |   2 +-
 .../react/src/styles/package-exports.test.ts  |  12 +
 .../@luke-ui/react/src/styles/reset.css.ts    |   4 +-
 .../react/src/styles/stylesheet-size.test.ts  |  16 +
 .../react/src/styles/theme-root.css.ts        |  10 +
 .../src/styles/utilities.browser.test.ts      |  96 ++
 .../react/src/styles/utilities.css.ts         | 217 ++--
 .../react/src/styles/utilities.stories.tsx    |  75 +-
 .../react/src/styles/utilities.test.ts        |  81 ++
 .../@luke-ui/react/src/styles/vars.css.ts     | 131 ---
 .../@luke-ui/react/src/text-field/index.tsx   |  22 +-
 .../react/src/text-field/primitive/index.tsx  |  18 +-
 packages/@luke-ui/react/src/text/index.tsx    |   8 +-
 .../@luke-ui/react/src/text/text.stories.tsx  |  18 +-
 packages/@luke-ui/react/src/theme.css.ts      |   3 -
 .../react/src/theme/build-theme.test.ts       |  52 +-
 .../@luke-ui/react/src/theme/build-theme.ts   |  38 +-
 packages/@luke-ui/react/src/theme/index.tsx   |  12 +-
 .../react/src/theme/tokens.stories.tsx        | 970 ++++++++++++++++++
 .../@luke-ui/react/src/tokens/converters.ts   | 110 --
 packages/@luke-ui/react/src/tokens/groups.ts  |  26 -
 packages/@luke-ui/react/src/tokens/index.ts   | 131 ---
 .../react/src/tokens/media-queries.ts         |  14 -
 .../react/src/tokens/tokens-vars.stories.tsx  | 953 -----------------
 packages/@luke-ui/react/src/tokens/values.ts  | 117 ---
 .../@luke-ui/react/src/types/icon-size.ts     |   2 +
 packages/@luke-ui/react/src/types/prettify.ts |   6 +
 .../react/src/types/public-props.test.ts      |  47 +
 packages/@luke-ui/react/vitest.config.ts      |   7 +-
 pnpm-lock.yaml                                |  11 -
 pnpm-workspace.yaml                           |   1 -
 87 files changed, 2160 insertions(+), 2105 deletions(-)
 create mode 100644 apps/docs/content/docs/components/layout/box.mdx
 create mode 100644 apps/docs/content/docs/components/layout/meta.json
 create mode 100644 apps/docs/src/examples/box/responsive-layout.tsx
 rename packages/@luke-ui/react/icons/{critical.svg => danger.svg} (100%)
 rename packages/@luke-ui/react/icons/{informative.svg => info.svg} (100%)
 rename packages/@luke-ui/react/icons/{caution.svg => warning.svg} (100%)
 delete mode 100644 packages/@luke-ui/react/scripts/generate-color-tokens.ts
 create mode 100644 packages/@luke-ui/react/src/box/box.browser.test.tsx
 create mode 100644 packages/@luke-ui/react/src/box/box.stories.tsx
 create mode 100644 packages/@luke-ui/react/src/box/box.test.ts
 create mode 100644 packages/@luke-ui/react/src/box/index.tsx
 create mode 100644 packages/@luke-ui/react/src/styles/package-exports.test.ts
 create mode 100644 packages/@luke-ui/react/src/styles/stylesheet-size.test.ts
 create mode 100644 packages/@luke-ui/react/src/styles/theme-root.css.ts
 create mode 100644 packages/@luke-ui/react/src/styles/utilities.browser.test.ts
 create mode 100644 packages/@luke-ui/react/src/styles/utilities.test.ts
 delete mode 100644 packages/@luke-ui/react/src/styles/vars.css.ts
 delete mode 100644 packages/@luke-ui/react/src/theme.css.ts
 create mode 100644 packages/@luke-ui/react/src/theme/tokens.stories.tsx
 delete mode 100644 packages/@luke-ui/react/src/tokens/converters.ts
 delete mode 100644 packages/@luke-ui/react/src/tokens/groups.ts
 delete mode 100644 packages/@luke-ui/react/src/tokens/index.ts
 delete mode 100644 packages/@luke-ui/react/src/tokens/media-queries.ts
 delete mode 100644 packages/@luke-ui/react/src/tokens/tokens-vars.stories.tsx
 delete mode 100644 packages/@luke-ui/react/src/tokens/values.ts
 create mode 100644 packages/@luke-ui/react/src/types/icon-size.ts
 create mode 100644 packages/@luke-ui/react/src/types/prettify.ts
 create mode 100644 packages/@luke-ui/react/src/types/public-props.test.ts

diff --git a/README.md b/README.md
index 264e3e35..975225df 100644
--- a/README.md
+++ b/README.md
@@ -26,8 +26,7 @@ Useful repo commands:
 
 `@luke-ui/react` contains the public React package.
 
-- Tokens: `packages/@luke-ui/react/src/tokens.ts`.
-- Theme: `packages/@luke-ui/react/src/theme/`.
+- Theme contract and compiler: `packages/@luke-ui/react/src/theme/`.
 - Styles: `packages/@luke-ui/react/src/styles/`.
 - Build output: `packages/@luke-ui/react/dist/stylesheet.css`.
 
diff --git a/apps/docs/content/docs/components/feedback/loading-spinner.mdx b/apps/docs/content/docs/components/feedback/loading-spinner.mdx
index 60a80bbc..d67101f9 100644
--- a/apps/docs/content/docs/components/feedback/loading-spinner.mdx
+++ b/apps/docs/content/docs/components/feedback/loading-spinner.mdx
@@ -38,7 +38,7 @@ Omit `value` for indeterminate progress. Pass `value` for determinate progress.
 <ExampleBlock
 	src="loading-spinner/colors"
 	title="Loading Spinner — Colors"
-	description="Informative and critical spinner colors."
+	description="Info and danger spinner colours."
 />
 
 ## Accessibility
diff --git a/apps/docs/content/docs/components/layout/box.mdx b/apps/docs/content/docs/components/layout/box.mdx
new file mode 100644
index 00000000..1a782945
--- /dev/null
+++ b/apps/docs/content/docs/components/layout/box.mdx
@@ -0,0 +1,37 @@
+---
+title: Box
+description: Responsive layout container backed by Luke UI Sprinkles.
+---
+
+`Box` is a `div` by default. Use its responsive layout, spacing, sizing, positioning, overflow,
+flex, and grid-child props to build layout without adding styling props to other components.
+
+<ExampleBlock
+	src="box/responsive-layout"
+	title="Box — Responsive layout"
+	description="A stack that becomes a row at the medium breakpoint."
+/>
+
+Spacing props use `0` or the semantic space steps `100`, `200`, `300`, `400`, `600`, `800`, `1000`,
+`1200`, and `1600`. Responsive objects use the `xsmall`, `small`, `medium`, `large`, `xlarge`, and
+`xxlarge` breakpoints.
+
+## Custom div component
+
+Use `render` with a compatible custom `div` component, such as a motion or presentational wrapper.
+Spread the provided props onto the actual `div` so the generated class, inline variables, ref,
+accessibility attributes, and event handlers are preserved. The callback does not change Box's DOM
+element contract to another element type.
+
+```tsx
+<Box padding="400" render={(props) => <MotionDiv {...props} />}>
+	Account summary
+</Box>
+```
+
+Semantic colour and typography are deliberately not Box props. Use component APIs or public semantic
+variables from `@luke-ui/react/theme` for sanctioned custom styling.
+
+## Props
+
+<auto-type-table path="packages/@luke-ui/react/src/box/index.tsx" name="BoxProps" />
diff --git a/apps/docs/content/docs/components/layout/meta.json b/apps/docs/content/docs/components/layout/meta.json
new file mode 100644
index 00000000..9fae5c85
--- /dev/null
+++ b/apps/docs/content/docs/components/layout/meta.json
@@ -0,0 +1,4 @@
+{
+	"title": "Layout",
+	"pages": ["box"]
+}
diff --git a/apps/docs/content/docs/components/meta.json b/apps/docs/content/docs/components/meta.json
index e0920e66..1849f159 100644
--- a/apps/docs/content/docs/components/meta.json
+++ b/apps/docs/content/docs/components/meta.json
@@ -1,4 +1,4 @@
 {
 	"title": "Components",
-	"pages": ["actions", "feedback", "forms", "typography", "visuals", "primitives"]
+	"pages": ["actions", "feedback", "forms", "layout", "typography", "visuals", "primitives"]
 }
diff --git a/apps/docs/src/examples/box/responsive-layout.tsx b/apps/docs/src/examples/box/responsive-layout.tsx
new file mode 100644
index 00000000..d596f93d
--- /dev/null
+++ b/apps/docs/src/examples/box/responsive-layout.tsx
@@ -0,0 +1,17 @@
+import { Box } from '@luke-ui/react/box';
+import { vars } from '@luke-ui/react/theme';
+
+export default function ResponsiveLayout() {
+	return (
+		<Box
+			display="flex"
+			flexDirection={{ medium: 'row', xsmall: 'column' }}
+			gap={{ medium: '600', xsmall: '200' }}
+			padding={{ medium: '600', xsmall: '300' }}
+			style={{ backgroundColor: vars.color.surface.recessed }}
+		>
+			<span>First item</span>
+			<span>Second item</span>
+		</Box>
+	);
+}
diff --git a/docs/STYLING.md b/docs/STYLING.md
index 003c544b..08171fb0 100644
--- a/docs/STYLING.md
+++ b/docs/STYLING.md
@@ -8,9 +8,8 @@ stylesheet and apply its identity class to the same element. Neither step inject
 
 ## Structure
 
-- `tokens.ts`: design token source.
-- `styles/vars.css.ts`: theme variables.
 - `styles/reset.css.ts`: reset scoped to `.luke-ui-reset`.
+- `styles/theme-root.css.ts`: base typography and text colour scoped to `.luke-ui-theme`.
 - `recipes/`: component recipes exported from `@luke-ui/react/recipes`.
 - `styles/`: public layout utilities exported from `@luke-ui/react/styles`.
 - `theme/contract.ts`: the semantic token tree and its `--luke-*` variable naming.
@@ -114,8 +113,9 @@ bundle smaller as the token scale grows.
 The tradeoff is that some values are applied through inline `style`, which raises specificity. That
 is acceptable because styling utilities are already the highest-priority escape hatch.
 
-Do not add a polymorphic `Box` component. React Aria Components' `render` prop covers the same need
-without adding another component API.
+`Box` from `@luke-ui/react/box` applies the same utilities to a `div`. Its `render` prop can use a
+compatible custom `div` component while preserving the generated class, style, ref, and DOM props.
+It does not provide `as` or `asChild` polymorphism.
 
 Do not add style props to every component. Component props should stay focused on component-specific
 variants and behaviour.
@@ -129,8 +129,8 @@ import { createSprinkles } from '@luke-ui/react/styles';
 
 const layout = createSprinkles({
 	display: 'flex',
-	gap: 'medium',
-	padding: 'large',
+	gap: '400',
+	padding: '600',
 });
 
 return (
@@ -140,9 +140,10 @@ return (
 );
 ```
 
-Token-backed properties use the design-token scale, for example `padding: 'large'`. Enum-like
-properties use CSS-native values, for example `display: 'flex'`. Numeric flex properties use string
-values, for example `flexGrow: '1'`.
+Spacing and gap properties use `0` or the semantic space steps `100`, `200`, `300`, `400`, `600`,
+`800`, `1000`, `1200`, and `1600`. Margin also accepts `auto`. Enum-like properties use CSS-native
+values, for example `display: 'flex'`. Sizing, inset, flex-basis, order, and grid-placement values
+accept their CSS property values.
 
 ## Responsive values
 
@@ -153,24 +154,12 @@ only overrides need to be specified.
 const responsive = createSprinkles({
 	display: 'flex',
 	flexDirection: { xsmall: 'column', medium: 'row' },
-	gap: { xsmall: 'small', medium: 'large' },
+	gap: { xsmall: '300', medium: '600' },
 });
 ```
 
-## Pseudo-state conditions
-
-Use condition objects for `hover` and `focus-visible` states.
-
-```tsx
-const interactive = createSprinkles({
-	padding: 'medium',
-	backgroundColor: {
-		default: 'neutral',
-		hover: 'neutralHover',
-		focusVisible: 'input',
-	},
-});
-```
+The retained breakpoints are `xsmall` (base), `small` (640px), `medium` (768px), `large` (1024px),
+`xlarge` (1280px), and `xxlarge` (1536px).
 
 ## React Aria `render` prop
 
@@ -181,7 +170,7 @@ Aria Components' `render` prop. Use `mergeProps` from `@luke-ui/react/utils` so
 ```tsx
 import { mergeProps } from '@luke-ui/react/utils';
 
-const buttonBox = createSprinkles({ padding: 'medium' });
+const buttonBox = createSprinkles({ padding: '400' });
 
 <Button
 	render={(props) => (
@@ -198,21 +187,37 @@ const buttonBox = createSprinkles({ padding: 'medium' });
 
 The v1 surface covers:
 
-- Layout: `display`, `flexDirection`, `justifyContent`, `alignItems`.
-- Flex item: `flexGrow`, `flexShrink`, `flexBasis`.
+- Layout: `display`.
+- Spacing: logical `margin*` and `padding*` properties.
 - Sizing: `inlineSize`, `blockSize`, `minInlineSize`, `minBlockSize`, `maxInlineSize`,
   `maxBlockSize`.
+- Positioning: `position` and logical `inset*` properties.
 - Gaps: `gap`, `rowGap`, `columnGap`.
-- Padding: `padding`, `paddingInline`, `paddingBlock`, `paddingInlineStart`, `paddingInlineEnd`,
-  `paddingBlockStart`, `paddingBlockEnd`.
-- Overflow: `overflow`, `overflowX`, `overflowY`, `textOverflow`.
-- Pseudo-state colour: `backgroundColor` with `hover` and `focus-visible`.
-
-Margin utilities are not part of the initial surface.
+- Overflow: `overflow`, `overflowX`, `overflowY`.
+- Flex: `flex`, `flexBasis`, `flexDirection`, `flexGrow`, `flexShrink`, `flexWrap`, `order`,
+  `alignContent`, `alignItems`, `alignSelf`, and `justifyContent`.
+- Grid children: `gridArea`, `gridColumn*`, `gridRow*`, `justifySelf`, and `placeSelf`.
 
 Use CSS-native values throughout, for example `flex-start` instead of `start`.
 
-Styling utilities do not yet read runtime theme context.
+Semantic colour, typography, and pseudo-state properties are deliberately excluded. Use component
+APIs where possible. Sanctioned custom styling uses the public typed `vars` from
+`@luke-ui/react/theme`, which resolve to stable `--luke-*` variables.
+
+```tsx
+import { vars } from '@luke-ui/react/theme';
+
+return (
+	<div
+		style={{
+			backgroundColor: vars.color.surface.recessed,
+			color: vars.color.text.primary,
+		}}
+	>
+		Custom content
+	</div>
+);
+```
 
 ## Implementation rules
 
diff --git a/knip.config.ts b/knip.config.ts
index 699dc1d6..82827d43 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -27,7 +27,6 @@ export default {
 				'src/stylesheet.css.ts',
 				'src/styles/index.css.ts',
 				'src/theme/index.tsx',
-				'src/tokens/index.ts',
 				'src/utils/index.ts',
 				'scripts/**/*.ts',
 			],
diff --git a/packages/@luke-ui/rainbow-sprinkles/src/types.ts b/packages/@luke-ui/rainbow-sprinkles/src/types.ts
index 0a3ab4ef..a5e2cb67 100644
--- a/packages/@luke-ui/rainbow-sprinkles/src/types.ts
+++ b/packages/@luke-ui/rainbow-sprinkles/src/types.ts
@@ -259,10 +259,7 @@ type ChildSprinkle<Sprinkle> = Sprinkle extends StaticDynamicConditionalProperty
 		: Sprinkle extends DynamicConditionalProperty
 			? Sprinkle['dynamicScale'] extends boolean
 				? ValueOrConditionObject<PropertyCssValue<Sprinkle['name']>, Sprinkle['vars']>
-				: ValueOrConditionObject<
-						PropertyCssValue<Sprinkle['name']> | (keyof Sprinkle['dynamicScale'] & string),
-						Sprinkle['vars']
-					>
+				: ValueOrConditionObject<keyof Sprinkle['dynamicScale'] & string, Sprinkle['vars']>
 			: Sprinkle extends StaticDynamicConditionalPropertyArray
 				? ValueOrConditionObject<Sprinkle['staticScale'][number], Sprinkle['dynamic']>
 				: Sprinkle extends StaticDynamicConditionalProperty
@@ -279,11 +276,9 @@ type ChildSprinkle<Sprinkle> = Sprinkle extends StaticDynamicConditionalProperty
 								: Sprinkle extends StaticDynamicPropertyArray
 									? PropertyCssValue<Sprinkle['name']>
 									: Sprinkle extends DynamicProperty
-										?
-												| PropertyCssValue<Sprinkle['name']>
-												| (Sprinkle['dynamicScale'] extends boolean
-														? never
-														: keyof Sprinkle['dynamicScale'] & string)
+										? Sprinkle['dynamicScale'] extends boolean
+											? PropertyCssValue<Sprinkle['name']>
+											: keyof Sprinkle['dynamicScale'] & string
 										: Sprinkle extends StaticProperty
 											? keyof Sprinkle['staticScale'] & string
 											: Sprinkle extends StaticPropertyArray
diff --git a/packages/@luke-ui/react/AGENTS.md b/packages/@luke-ui/react/AGENTS.md
index fe6adb9e..8ab74606 100644
--- a/packages/@luke-ui/react/AGENTS.md
+++ b/packages/@luke-ui/react/AGENTS.md
@@ -18,6 +18,34 @@ A component directory contains:
 - `index.tsx`: component implementation
 - `primitive/`: optional primitive exports
 
+## Exported prop types
+
+Define exported component props with an interface extending a named `DistributiveOmit` alias, then
+wrap it with `Prettify`:
+
+```ts
+type _ComponentOmit = DistributiveOmit<SourceType, OmittedKeys>;
+
+interface _ComponentProps extends _ComponentOmit, StyleProps {
+	/** Documented prop. */
+	myProp?: string;
+}
+
+export type ComponentProps = Prettify<_ComponentProps>;
+```
+
+Rules:
+
+- Use `interface extends` — avoid type intersections (`&`) for prop types. Interfaces display
+  clearly in IDE tooltips and extend naturally.
+- Wrap the exported type with `Prettify` from `../types/prettify.js` so consumers see a flat,
+  readable type in their IDE.
+- Use `DistributiveOmit` from `../types/distributive-omit.js` for prop omission. Its strict key
+  constraint validates and autocompletes omitted keys, so misspelled or obsolete keys cannot pass
+  silently. Define a named alias because interfaces cannot extend conditional types directly.
+- Name the internal interface `_ComponentProps` (underscore prefix) and export the Prettified
+  version as `ComponentProps`.
+
 ## Component taxonomy
 
 Components follow the Atom, Composed, and Primitive taxonomy. See `docs/CONVENTIONS.md` for
diff --git a/packages/@luke-ui/react/README.md b/packages/@luke-ui/react/README.md
index f2ef943a..a9b362f2 100644
--- a/packages/@luke-ui/react/README.md
+++ b/packages/@luke-ui/react/README.md
@@ -10,14 +10,18 @@ pnpm add @luke-ui/react
 
 ## Setup
 
-Import the stylesheet and apply the theme class at your app root.
+Import the component stylesheet and one bundled theme stylesheet. Apply the theme root and identity
+classes to the same element.
 
 ```tsx
 import '@luke-ui/react/stylesheet.css';
+import '@luke-ui/react/themes/machined-edge.css';
 import { themeRootClassName } from '@luke-ui/react/theme';
+import { machinedEdgeThemeClassName } from '@luke-ui/react/themes';
+import { cx } from '@luke-ui/react/utils';
 
 export function App() {
-	return <div className={themeRootClassName}>{/* your app */}</div>;
+	return <div className={cx(themeRootClassName, machinedEdgeThemeClassName)}>{/* your app */}</div>;
 }
 ```
 
diff --git a/packages/@luke-ui/react/icons/critical.svg b/packages/@luke-ui/react/icons/danger.svg
similarity index 100%
rename from packages/@luke-ui/react/icons/critical.svg
rename to packages/@luke-ui/react/icons/danger.svg
diff --git a/packages/@luke-ui/react/icons/informative.svg b/packages/@luke-ui/react/icons/info.svg
similarity index 100%
rename from packages/@luke-ui/react/icons/informative.svg
rename to packages/@luke-ui/react/icons/info.svg
diff --git a/packages/@luke-ui/react/icons/caution.svg b/packages/@luke-ui/react/icons/warning.svg
similarity index 100%
rename from packages/@luke-ui/react/icons/caution.svg
rename to packages/@luke-ui/react/icons/warning.svg
diff --git a/packages/@luke-ui/react/package.json b/packages/@luke-ui/react/package.json
index 85809aae..75b92297 100644
--- a/packages/@luke-ui/react/package.json
+++ b/packages/@luke-ui/react/package.json
@@ -14,6 +14,7 @@
 		"./dist/themes/*.css"
 	],
 	"exports": {
+		"./box": "./dist/box/index.js",
 		"./button": "./dist/button/index.js",
 		"./button/primitive": "./dist/button/primitive/index.js",
 		"./combobox-field": "./dist/combobox-field/index.js",
@@ -36,7 +37,6 @@
 		"./text-field/primitive": "./dist/text-field/primitive/index.js",
 		"./theme": "./dist/theme/index.js",
 		"./themes": "./dist/themes/index.js",
-		"./tokens": "./dist/tokens/index.js",
 		"./utils": "./dist/utils/index.js",
 		"./package.json": "./package.json",
 		"./stylesheet.css": "./dist/stylesheet.css",
@@ -65,8 +65,7 @@
 		"fix:lint": "vp lint . --type-aware --fix",
 		"fix:unsafe": "vp lint . --type-aware --fix-dangerously",
 		"generate": "pnpm run generate:assets",
-		"generate:assets": "pnpm run generate:icons && pnpm run generate:color-tokens && pnpm run generate:themes",
-		"generate:color-tokens": "node scripts/generate-color-tokens.ts && vp fmt .generated/color-tokens.generated.ts --write",
+		"generate:assets": "pnpm run generate:icons && pnpm run generate:themes",
 		"generate:icons": "tsx scripts/build-icons.ts",
 		"generate:themes": "tsx scripts/build-themes.ts",
 		"test": "pnpm run test:unit && pnpm run test:browser && pnpm run test:storybook && pnpm run test:visual",
@@ -106,7 +105,6 @@
 		"@vitest/coverage-v8": "catalog:",
 		"@vitest/ui": "catalog:",
 		"babel-plugin-react-compiler": "catalog:",
-		"colorjs.io": "catalog:",
 		"node-html-parser": "catalog:",
 		"pixelmatch": "catalog:",
 		"playwright": "catalog:",
diff --git a/packages/@luke-ui/react/scripts/generate-color-tokens.ts b/packages/@luke-ui/react/scripts/generate-color-tokens.ts
deleted file mode 100644
index adcb9fbf..00000000
--- a/packages/@luke-ui/react/scripts/generate-color-tokens.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import Color from 'colorjs.io';
-import { mkdir, writeFile } from 'node:fs/promises';
-
-interface GeneratedColorTokenValue {
-	alpha?: number;
-	colorSpace: string;
-	components: Array<number>;
-}
-
-const paletteThemePrimary = {
-	base: '#0160ae',
-	100: '#e9f3fb',
-	200: '#d4e7f7',
-	300: '#a9cfef',
-	400: '#2888d7',
-	500: '#185281',
-	600: '#103656',
-} as const;
-
-const paletteThemeAccent = {
-	base: '#ee2925',
-	100: '#f9ebeb',
-	200: '#f4d8d7',
-	300: '#e8b1b0',
-	400: '#c63c39',
-	500: '#772422',
-	600: '#4f1817',
-} as const;
-
-const backgroundColorValues = {
-	neutral: '#fff',
-	neutralHover: '#ededed',
-	neutralPressed: '#e4e4e4',
-	neutralDisabled: '#ededed',
-	neutralSubtle: '#fafafa',
-	neutralBold: '#d9d9d9',
-	neutralInverted: '#212121',
-	input: '#fff',
-	inputDisabled: '#fafafa',
-	positiveSubtle: '#d5f2bb',
-	positiveBold: '#306317',
-	informativeSubtle: '#d6e4ff',
-	informativeBold: '#1d39c4',
-	cautionSubtle: '#faedb5',
-	cautionBold: '#d89614',
-	criticalSubtle: '#fac8c3',
-	criticalBold: '#c0262e',
-	criticalBoldHover: '#a61d24',
-	criticalBoldPressed: '#791a1f',
-} as const;
-
-const borderColorValues = {
-	neutralSubtle: '#e4e4e4',
-	neutralBold: '#bdbdbd',
-	neutralDisabled: '#e4e4e4',
-	neutralBoldInverted: '#fff',
-	input: '#bdbdbd',
-	inputCritical: '#c0262e',
-	positive: '#6abe39',
-	informative: '#597ef7',
-	caution: '#e8b339',
-	critical: '#e84749',
-} as const;
-
-const foregroundColorValues = {
-	neutralSubtle: '#737373',
-	neutralBold: '#212121',
-	neutralDisabled: '#9e9e9e',
-	neutralBoldInverted: '#fff',
-	positive: '#3c8618',
-	informative: '#1d39c4',
-	caution: '#ad7914',
-	critical: '#c0262e',
-} as const;
-
-const themeColorValues = {
-	buttonBackgroundColor: paletteThemePrimary['500'],
-	buttonBackgroundColorHover: paletteThemePrimary['600'],
-	buttonBackgroundColorActive: paletteThemePrimary['600'],
-	buttonBorderColor: paletteThemePrimary['500'],
-	buttonBorderColorHover: paletteThemePrimary['600'],
-	buttonBorderColorActive: paletteThemePrimary['600'],
-	buttonColor: paletteThemePrimary['100'],
-	focusRingColor: paletteThemePrimary['300'],
-	inputBackgroundColor: backgroundColorValues.neutral,
-	inputBackgroundColorHover: paletteThemePrimary['100'],
-	inputBackgroundColorActive: paletteThemePrimary['200'],
-	inputBorderColor: paletteThemePrimary['300'],
-	inputBorderColorHover: paletteThemePrimary['500'],
-	inputBorderColorActive: paletteThemePrimary['600'],
-	inputColor: paletteThemePrimary['600'],
-	linkColor: paletteThemePrimary.base,
-	linkColorHover: paletteThemePrimary['600'],
-	menuBackgroundColor: paletteThemePrimary['600'],
-	menuColor: paletteThemePrimary['100'],
-	menuColorHover: backgroundColorValues.neutral,
-	menuItemAccent: paletteThemeAccent.base,
-	menuItemBackgroundColor: paletteThemePrimary['400'],
-	menuItemBackgroundColorHover: paletteThemePrimary['500'],
-	menuItemBackgroundColorActive: paletteThemePrimary['600'],
-	menuLogoBackgroundColor: backgroundColorValues.neutral,
-	paletteThemeAccentBase: paletteThemeAccent.base,
-	paletteThemeAccent100: paletteThemeAccent['100'],
-	paletteThemeAccent200: paletteThemeAccent['200'],
-	paletteThemeAccent300: paletteThemeAccent['300'],
-	paletteThemeAccent400: paletteThemeAccent['400'],
-	paletteThemeAccent500: paletteThemeAccent['500'],
-	paletteThemeAccent600: paletteThemeAccent['600'],
-	paletteThemePrimaryBase: paletteThemePrimary.base,
-	paletteThemePrimary100: paletteThemePrimary['100'],
-	paletteThemePrimary200: paletteThemePrimary['200'],
-	paletteThemePrimary300: paletteThemePrimary['300'],
-	paletteThemePrimary400: paletteThemePrimary['400'],
-	paletteThemePrimary500: paletteThemePrimary['500'],
-	paletteThemePrimary600: paletteThemePrimary['600'],
-} as const;
-
-const colorGroups = {
-	backgroundColorTokenValues: backgroundColorValues,
-	borderColorTokenValues: borderColorValues,
-	foregroundColorTokenValues: foregroundColorValues,
-	themeColorTokenValues: themeColorValues,
-} as const;
-
-function roundNumber(value: number): number {
-	return Math.round(value * 1_000_000) / 1_000_000;
-}
-
-function toDesignTokenColorSpace(colorJsSpaceId: string): string {
-	return colorJsSpaceId === 'p3' ? 'display-p3' : colorJsSpaceId;
-}
-
-function toColorTokenValue(inputColor: string): GeneratedColorTokenValue {
-	const parsedColor = new Color(inputColor);
-	const alpha = roundNumber(parsedColor.alpha ?? 1);
-
-	const components = parsedColor.coords.map((component, index) => {
-		if (component === null) {
-			throw new Error(`Color token "${inputColor}" has a missing component at index ${index}`);
-		}
-
-		return roundNumber(component);
-	});
-
-	return {
-		...(alpha === 1 ? {} : { alpha }),
-		colorSpace: toDesignTokenColorSpace(parsedColor.spaceId),
-		components,
-	};
-}
-
-function toGeneratedConst(name: string, value: unknown): string {
-	return `export const ${name} = ${JSON.stringify(value, null, '\t')} as const;\n`;
-}
-
-const generatedGroups = Object.entries(colorGroups).map(([name, values]) => {
-	const transformed = Object.fromEntries(
-		Object.entries(values).map(([key, inputColor]) => [key, toColorTokenValue(inputColor)]),
-	);
-
-	return toGeneratedConst(name, transformed);
-});
-
-const output = `// This file is auto-generated by scripts/generate-color-tokens.ts.\n// Do not edit manually.\n\n${generatedGroups.join('\n')}`;
-
-const outputPath = fileURLToPath(
-	new URL('../.generated/color-tokens.generated.ts', import.meta.url),
-);
-
-await mkdir(dirname(outputPath), { recursive: true });
-await writeFile(outputPath, output, 'utf8');
diff --git a/packages/@luke-ui/react/scripts/visual-regression-lib.ts b/packages/@luke-ui/react/scripts/visual-regression-lib.ts
index d6d818b1..ef05363c 100644
--- a/packages/@luke-ui/react/scripts/visual-regression-lib.ts
+++ b/packages/@luke-ui/react/scripts/visual-regression-lib.ts
@@ -216,10 +216,9 @@ function renderDocument(
 	metadata: { base: string; current: string; platform: string },
 ) {
 	const statusButtons = Object.entries(counts)
-		.map(
-			([status, count]) =>
-				`<button onclick="document.body.dataset.filter='${status}'">${status} (${count})</button>`,
-		)
+		.map(([status, count]) => {
+			return `<button onclick="document.body.dataset.filter='${status}'">${status} (${count})</button>`;
+		})
 		.join('');
 	const namespaces = [...new Set(results.map((result) => getNamespace(result.id)))].sort();
 	const namespaceOptions = namespaces
diff --git a/packages/@luke-ui/react/src/box/box.browser.test.tsx b/packages/@luke-ui/react/src/box/box.browser.test.tsx
new file mode 100644
index 00000000..944c00a8
--- /dev/null
+++ b/packages/@luke-ui/react/src/box/box.browser.test.tsx
@@ -0,0 +1,79 @@
+import '../../dist/themes/machined-edge.css';
+import '../stylesheet.css.js';
+import { act, createRef } from 'react';
+import type { Root } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
+import { afterEach, expect, test } from 'vite-plus/test';
+import { page } from 'vite-plus/test/context';
+import { themeRootClassName } from '../theme/index.js';
+import { machinedEdgeThemeClassName } from '../themes/index.js';
+import { Box } from './index.js';
+
+const mounted: Array<{ container: HTMLElement; root: Root }> = [];
+
+afterEach(async () => {
+	for (const { container, root } of mounted) {
+		act(() => root.unmount());
+		container.remove();
+	}
+	mounted.length = 0;
+	await page.viewport(1024, 800);
+});
+
+test('renders a responsive layout at the retained breakpoints', async () => {
+	const container = document.body.appendChild(document.createElement('div'));
+	container.className = `${themeRootClassName} ${machinedEdgeThemeClassName}`;
+	const root = createRoot(container);
+	mounted.push({ container, root });
+
+	act(() => {
+		root.render(
+			<Box
+				display="flex"
+				flexDirection={{ medium: 'row', xsmall: 'column' }}
+				gap={{ medium: '600', xsmall: '200' }}
+			>
+				<span>First item</span>
+				<span>Second item</span>
+			</Box>,
+		);
+	});
+
+	const box = container.firstElementChild;
+	if (!(box instanceof HTMLElement)) throw new Error('Expected Box element.');
+
+	await page.viewport(640, 800);
+	expect(getComputedStyle(box).flexDirection).toBe('column');
+	expect(getComputedStyle(box).gap).toBe('8px');
+
+	await page.viewport(768, 800);
+	expect(getComputedStyle(box).flexDirection).toBe('row');
+	expect(getComputedStyle(box).gap).toBe('24px');
+});
+
+test('forwards the ref through a custom rendered div', () => {
+	const container = document.body.appendChild(document.createElement('div'));
+	const root = createRoot(container);
+	const ref = createRef<HTMLDivElement>();
+	mounted.push({ container, root });
+
+	act(() => {
+		root.render(
+			<Box
+				id="custom-div"
+				ref={ref}
+				render={(domProps) => <div data-motion="enabled" {...domProps} />}
+			>
+				Custom div
+			</Box>,
+		);
+	});
+
+	const div = container.firstElementChild;
+	if (!(div instanceof HTMLDivElement)) throw new Error('Expected custom rendered div.');
+
+	expect(ref.current).toBe(div);
+	expect(div).toHaveAttribute('data-motion', 'enabled');
+	expect(div).toHaveAttribute('id', 'custom-div');
+	expect(div).toHaveTextContent('Custom div');
+});
diff --git a/packages/@luke-ui/react/src/box/box.stories.tsx b/packages/@luke-ui/react/src/box/box.stories.tsx
new file mode 100644
index 00000000..791ef987
--- /dev/null
+++ b/packages/@luke-ui/react/src/box/box.stories.tsx
@@ -0,0 +1,62 @@
+import type { BoxProps } from '@luke-ui/react/box';
+import { Box } from '@luke-ui/react/box';
+import { vars } from '@luke-ui/react/theme';
+import type { ComponentPropsWithRef } from 'react';
+import { expect } from 'storybook/test';
+import preview from '../../.storybook/preview.js';
+
+const meta = preview.meta({
+	component: Box,
+	tags: ['layout'],
+	title: 'Layout/Box',
+});
+
+/** Use Box for responsive layout without attaching layout props to semantic components. */
+export const Default = meta.story({
+	args: {
+		children: (
+			<>
+				<span>First item</span>
+				<span>Second item</span>
+			</>
+		),
+		display: 'flex',
+		flexDirection: { medium: 'row', xsmall: 'column' },
+		gap: { medium: '600', xsmall: '200' },
+		padding: { medium: '600', xsmall: '300' },
+		style: { backgroundColor: vars.color.surface.recessed },
+	} satisfies Partial<BoxProps>,
+	play: async ({ canvas }) => {
+		const box = canvas.getByText('First item').parentElement;
+		if (!box) throw new Error('Expected Box parent.');
+
+		await expect(getComputedStyle(box).display).toBe('flex');
+		await expect(getComputedStyle(box).flexDirection).toBe('row');
+		await expect(getComputedStyle(box).gap).toBe('24px');
+	},
+});
+
+/** Use `render` with a compatible custom div while preserving generated and consumer props. */
+export const CustomDiv = meta.story({
+	args: {
+		'aria-label': 'Account summary',
+		children: 'Account summary content',
+		className: 'consumer-class',
+		id: 'account-summary',
+		padding: '400',
+		render: (domProps) => <MotionDiv {...domProps} />,
+		style: { backgroundColor: vars.color.surface.resting },
+	} satisfies Partial<BoxProps>,
+	play: async ({ canvas }) => {
+		const div = canvas.getByText('Account summary content');
+		await expect(div).toHaveClass('consumer-class');
+		await expect(div).toHaveAttribute('data-motion', 'enabled');
+		await expect(div).toHaveAttribute('id', 'account-summary');
+		await expect(getComputedStyle(div).padding).toBe('16px');
+		await expect(getComputedStyle(div).backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+	},
+});
+
+function MotionDiv(props: ComponentPropsWithRef<'div'>) {
+	return <div data-motion="enabled" {...props} />;
+}
diff --git a/packages/@luke-ui/react/src/box/box.test.ts b/packages/@luke-ui/react/src/box/box.test.ts
new file mode 100644
index 00000000..b7c46476
--- /dev/null
+++ b/packages/@luke-ui/react/src/box/box.test.ts
@@ -0,0 +1,28 @@
+import { createElement, createRef } from 'react';
+import { expectTypeOf, test } from 'vite-plus/test';
+import type { BoxProps } from './index.js';
+
+const boxProps = {
+	'aria-label': 'Account summary',
+	display: { medium: 'flex', xsmall: 'block' },
+	id: 'account-summary',
+	onClick: () => undefined,
+	padding: '400',
+	ref: createRef<HTMLDivElement>(),
+	render: (domProps, renderProps) => {
+		expectTypeOf(renderProps).toEqualTypeOf<undefined>();
+
+		return createElement('div', domProps);
+	},
+} satisfies BoxProps;
+
+// Type assertions are compile-time only.
+// oxlint-disable-next-line vitest/expect-expect
+test('preserves native DOM, render, and responsive layout props', () => {
+	expectTypeOf(boxProps).toExtend<BoxProps>();
+	expectTypeOf(boxProps.render).toExtend<BoxProps['render']>();
+	expectTypeOf(boxProps.display).toEqualTypeOf<{
+		medium: 'flex';
+		xsmall: 'block';
+	}>();
+});
diff --git a/packages/@luke-ui/react/src/box/index.tsx b/packages/@luke-ui/react/src/box/index.tsx
new file mode 100644
index 00000000..aaed1668
--- /dev/null
+++ b/packages/@luke-ui/react/src/box/index.tsx
@@ -0,0 +1,46 @@
+import type { ComponentPropsWithRef, JSX, ReactElement } from 'react';
+import type { SprinklesProps } from '../styles/index.js';
+import { createSprinkles } from '../styles/index.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
+import { mergeProps } from '../utils/index.js';
+
+type BoxRender = (props: ComponentPropsWithRef<'div'>, renderProps: undefined) => ReactElement;
+
+interface _BoxProps extends ComponentPropsWithRef<'div'>, SprinklesProps {
+	/** Renders a compatible custom `div` while carrying Box's DOM props and generated styles. */
+	render?: BoxRender;
+}
+
+/**
+ * Props for `Box`. Layout props accept responsive values keyed by Luke UI breakpoints.
+ *
+ * @tier atom
+ */
+export type BoxProps = Prettify<_BoxProps>;
+
+/** A layout container backed by Luke UI Sprinkles. */
+export function Box(props: BoxProps): JSX.Element {
+	const { className, render, style, ...restProps } = props;
+	const [sprinklesProps, elementProps] = splitProps(restProps);
+	const domProps = mergeProps(elementProps, createSprinkles(sprinklesProps));
+	const mergedDomProps = mergeProps(domProps, { className, style });
+
+	return render ? render(mergedDomProps, undefined) : <div {...mergedDomProps} />;
+}
+
+function splitProps(
+	props: DistributiveOmit<BoxProps, 'className' | 'render' | 'style'>,
+): [SprinklesProps, ComponentPropsWithRef<'div'>] {
+	const sprinklesProps: Record<string, unknown> = {};
+	const elementProps: Record<string, unknown> = {};
+
+	for (const [property, value] of Object.entries(props)) {
+		const target = createSprinkles.properties.has(property as keyof SprinklesProps)
+			? sprinklesProps
+			: elementProps;
+		target[property] = value;
+	}
+
+	return [sprinklesProps as SprinklesProps, elementProps as ComponentPropsWithRef<'div'>];
+}
diff --git a/packages/@luke-ui/react/src/button/button.stories.tsx b/packages/@luke-ui/react/src/button/button.stories.tsx
index 4f13f912..a498ab9b 100644
--- a/packages/@luke-ui/react/src/button/button.stories.tsx
+++ b/packages/@luke-ui/react/src/button/button.stories.tsx
@@ -4,7 +4,7 @@ import { Icon } from '@luke-ui/react/icon';
 import type { CSSProperties } from 'react';
 import { expect, fn, userEvent } from 'storybook/test';
 import preview from '../../.storybook/preview.js';
-import { vars } from '../theme.css.js';
+import { vars } from '../theme/index.js';
 
 const meta = preview.meta({
 	component: Button,
@@ -43,7 +43,7 @@ const blockContainerStyle = {
 } as const satisfies CSSProperties;
 
 const truncationContainerStyle = {
-	borderColor: vars.border.default,
+	borderColor: vars.color.border.decorative,
 	borderStyle: 'dashed',
 	borderWidth: 1,
 	inlineSize: '100%',
diff --git a/packages/@luke-ui/react/src/button/button.visual.test.tsx b/packages/@luke-ui/react/src/button/button.visual.test.tsx
index 10be97bb..3a70c8be 100644
--- a/packages/@luke-ui/react/src/button/button.visual.test.tsx
+++ b/packages/@luke-ui/react/src/button/button.visual.test.tsx
@@ -20,8 +20,8 @@ test('tones and appearances across sizes', async () => {
 	const locator = renderVisual(
 		<Grid columns={appearances.length}>
 			{sizes.flatMap((size) => {
-				return tones.flatMap((tone) =>
-					appearances.map((appearance) => (
+				return tones.flatMap((tone) => {
+					return appearances.map((appearance) => (
 						<Button
 							appearance={appearance}
 							key={`${size}-${tone}-${appearance}`}
@@ -30,8 +30,8 @@ test('tones and appearances across sizes', async () => {
 						>
 							{tone} {appearance}
 						</Button>
-					)),
-				);
+					));
+				});
 			})}
 		</Grid>,
 	);
diff --git a/packages/@luke-ui/react/src/button/index.tsx b/packages/@luke-ui/react/src/button/index.tsx
index 85714e15..01ea160d 100644
--- a/packages/@luke-ui/react/src/button/index.tsx
+++ b/packages/@luke-ui/react/src/button/index.tsx
@@ -3,7 +3,9 @@ import { LoadingSpinner } from '../loading-spinner/index.js';
 import * as styles from '../recipes/button-composed.css.js';
 import type * as primitiveStyles from '../recipes/button.css.js';
 import { Text } from '../text/index.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { DocumentedPressProps } from '../types/documented-rac-props.js';
+import type { Prettify } from '../types/prettify.js';
 import type { ButtonProps as PrimitiveButtonProps } from './primitive/index.js';
 import { Button as PrimitiveButton } from './primitive/index.js';
 
@@ -47,16 +49,19 @@ interface ButtonStyleProps {
 	tone?: PrimitiveButtonRecipeProps['tone'];
 }
 
+type _ButtonOmit = DistributiveOmit<
+	PrimitiveButtonProps,
+	'appearance' | 'isBlock' | 'isPending' | 'size' | 'tone' | keyof DocumentedPressProps
+>;
+
+interface _ButtonProps extends _ButtonOmit, ButtonStyleProps, DocumentedPressProps {}
+
 /**
  * Composed button with size, tone, appearance, pending, and block options.
  *
  * @tier composed
  */
-export interface ButtonProps
-	extends
-		Omit<PrimitiveButtonProps, keyof ButtonStyleProps | keyof DocumentedPressProps>,
-		ButtonStyleProps,
-		DocumentedPressProps {}
+export type ButtonProps = Prettify<_ButtonProps>;
 
 /** Composed button. Wraps children in a `Text` for ellipsis truncation. Shows a spinner when `isPending`. */
 export function Button(props: ButtonProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/button/primitive/index.tsx b/packages/@luke-ui/react/src/button/primitive/index.tsx
index 0c08dd48..35e6aff2 100644
--- a/packages/@luke-ui/react/src/button/primitive/index.tsx
+++ b/packages/@luke-ui/react/src/button/primitive/index.tsx
@@ -5,6 +5,7 @@ import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import { IconSizeProvider } from '../../icon-size-context/index.js';
 import * as styles from '../../recipes/button.css.js';
 import { BUTTON_ICON_SIZE } from '../../sizing/button-sizing.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
 interface ButtonRecipeProps extends NonNullable<styles.ButtonVariants> {}
@@ -32,14 +33,15 @@ interface ButtonStyleProps {
 	tone?: ButtonRecipeProps['tone'];
 }
 
+interface _ButtonProps extends RacButtonProps, ButtonStyleProps {}
+
 /**
  * Primitive button — a bare `<button>` styled with size, tone, appearance, and block options.
  * Library-author audience: use this when you need full control over children layout.
  *
  * @tier primitive
  */
-export interface ButtonProps
-	extends Omit<RacButtonProps, keyof ButtonStyleProps>, ButtonStyleProps {}
+export type ButtonProps = Prettify<_ButtonProps>;
 
 /** Primitive button. See `ButtonProps`. */
 export function Button(props: ButtonProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/combobox-field/index.tsx b/packages/@luke-ui/react/src/combobox-field/index.tsx
index 1aaba457..d6d3c438 100644
--- a/packages/@luke-ui/react/src/combobox-field/index.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/index.tsx
@@ -6,6 +6,7 @@ import { Field } from '../field/primitive/index.js';
 import { Icon } from '../icon/index.js';
 import { LoadingSpinner } from '../loading-spinner/index.js';
 import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 import { ComboboxClearButton } from './primitive/clear-button.js';
 import { ComboboxControl } from './primitive/control.js';
 import { ComboboxEmptyState } from './primitive/empty-state.js';
@@ -29,16 +30,13 @@ interface ComboboxFieldRedeclaredRACProps {
 	isReadOnly?: RacComboBoxProps<object>['isReadOnly'];
 }
 
-/**
- * Props for composed `ComboboxField` (searchable single-select).
- *
- * @tier composed
- */
-export interface ComboboxFieldProps<T extends object>
-	extends
-		DistributiveOmit<ComboboxRootProps<T>, 'children' | keyof ComboboxFieldRedeclaredRACProps>,
-		ComboboxFieldRedeclaredRACProps,
-		FieldSlotProps {
+type _ComboboxFieldOmit<T extends object> = DistributiveOmit<
+	ComboboxRootProps<T>,
+	'children' | keyof ComboboxFieldRedeclaredRACProps
+>;
+
+interface _ComboboxFieldProps<T extends object>
+	extends _ComboboxFieldOmit<T>, ComboboxFieldRedeclaredRACProps, FieldSlotProps {
 	/** Item content for the listbox (render prop or static children). */
 	children: ComboboxListBoxProps<T>['children'];
 
@@ -67,6 +65,13 @@ export interface ComboboxFieldProps<T extends object>
 	size?: ComboboxSize;
 }
 
+/**
+ * Props for composed `ComboboxField` (searchable single-select).
+ *
+ * @tier composed
+ */
+export type ComboboxFieldProps<T extends object> = Prettify<_ComboboxFieldProps<T>>;
+
 /** Composes `ComboboxRoot` with label, description, and error slots. */
 export function ComboboxField<T extends object>(props: ComboboxFieldProps<T>): JSX.Element {
 	const [fieldSlotProps, restProps] = composeField(props);
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/clear-button.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/clear-button.tsx
index bac5782d..607390f8 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/clear-button.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/clear-button.tsx
@@ -7,22 +7,23 @@ import { IconSizeProvider } from '../../icon-size-context/index.js';
 import * as styles from '../../recipes/combobox.css.js';
 import { COMBOBOX_ICON_SIZE } from '../../sizing/combobox-sizing.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import type { ComboboxSize } from './root.js';
 import { useComboboxSize } from './size-context.js';
 
+type _ComboboxClearButtonOmit = DistributiveOmit<RacButtonProps, 'className' | 'slot'>;
+interface _ComboboxClearButtonProps extends _ComboboxClearButtonOmit {
+	className?: RacButtonProps['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for the combobox clear button.
  *
  * @tier primitive
  */
-export interface ComboboxClearButtonProps extends DistributiveOmit<
-	RacButtonProps,
-	'className' | 'slot'
-> {
-	className?: RacButtonProps['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxClearButtonProps = Prettify<_ComboboxClearButtonProps>;
 
 /** Clears the combobox selection. Renders nothing while no option is selected. */
 export function ComboboxClearButton(props: ComboboxClearButtonProps): JSX.Element | null {
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/control.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/control.tsx
index f1fcb5f7..8c2ebb0c 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/control.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/control.tsx
@@ -4,19 +4,23 @@ import { Group as RacGroup } from 'react-aria-components/Group';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/combobox.css.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import type { ComboboxSize } from './root.js';
 import { useComboboxSize } from './size-context.js';
 
+type _ComboboxControlOmit = DistributiveOmit<RacGroupProps, 'className'>;
+interface _ComboboxControlProps extends _ComboboxControlOmit {
+	className?: RacGroupProps['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for the styled combobox control group.
  *
  * @tier primitive
  */
-export interface ComboboxControlProps extends DistributiveOmit<RacGroupProps, 'className'> {
-	className?: RacGroupProps['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxControlProps = Prettify<_ComboboxControlProps>;
 
 /** Control wrapper for combobox text input + trigger content. */
 export function ComboboxControl(props: ComboboxControlProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/empty-state.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/empty-state.tsx
index 3a7977cc..042689e9 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/empty-state.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/empty-state.tsx
@@ -1,16 +1,19 @@
 import type { JSX, ReactNode } from 'react';
 import * as styles from '../../recipes/combobox.css.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
+interface _ComboboxEmptyStateProps {
+	children: ReactNode;
+	className?: string;
+}
+
 /**
  * Props for `ComboboxEmptyState`.
  *
  * @tier primitive
  */
-export interface ComboboxEmptyStateProps {
-	children: ReactNode;
-	className?: string;
-}
+export type ComboboxEmptyStateProps = Prettify<_ComboboxEmptyStateProps>;
 
 export function ComboboxEmptyState(props: ComboboxEmptyStateProps): JSX.Element {
 	const { children, className } = props;
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/input.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/input.tsx
index 8ce541dc..338830cd 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/input.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/input.tsx
@@ -5,22 +5,23 @@ import { ComboBoxStateContext, Input as RacInput } from 'react-aria-components/C
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/combobox.css.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import type { ComboboxSize } from './root.js';
 import { useComboboxSize } from './size-context.js';
 
+type _ComboboxTextInputOmit = DistributiveOmit<RacInputProps, 'className' | 'size'>;
+interface _ComboboxTextInputProps extends _ComboboxTextInputOmit {
+	className?: RacInputProps['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for the styled combobox text input.
  *
  * @tier primitive
  */
-export interface ComboboxTextInputProps extends DistributiveOmit<
-	RacInputProps,
-	'className' | 'size'
-> {
-	className?: RacInputProps['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxTextInputProps = Prettify<_ComboboxTextInputProps>;
 
 /** Text input used within `ComboboxControl` for combobox behavior. */
 export function ComboboxTextInput(props: ComboboxTextInputProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/item.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/item.tsx
index 5b7dc4fd..4f69aa1b 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/item.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/item.tsx
@@ -13,22 +13,24 @@ import { Icon } from '../../icon/index.js';
 import * as styles from '../../recipes/combobox.css.js';
 import { COMBOBOX_ICON_SIZE } from '../../sizing/combobox-sizing.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import type { ComboboxSize } from './root.js';
 import { useComboboxSize } from './size-context.js';
 
+type _ComboboxItemOmit<T extends object> = DistributiveOmit<RacListBoxItemProps<T>, 'className'>;
+
+interface _ComboboxItemProps<T extends object> extends _ComboboxItemOmit<T> {
+	className?: RacListBoxItemProps<T>['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for a combobox list item.
  *
  * @tier primitive
  */
-export interface ComboboxItemProps<T extends object> extends DistributiveOmit<
-	RacListBoxItemProps<T>,
-	'className'
-> {
-	className?: RacListBoxItemProps<T>['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxItemProps<T extends object> = Prettify<_ComboboxItemProps<T>>;
 
 export function ComboboxItem<T extends object>(props: ComboboxItemProps<T>): JSX.Element {
 	const { size: sizeProp, ...itemProps } = props;
@@ -60,18 +62,18 @@ export function ComboboxItem<T extends object>(props: ComboboxItemProps<T>): JSX
 	);
 }
 
+type _ComboboxLoadMoreItemOmit = DistributiveOmit<RacListBoxLoadMoreItemProps, 'className'>;
+interface _ComboboxLoadMoreItemProps extends _ComboboxLoadMoreItemOmit {
+	className?: RacListBoxLoadMoreItemProps['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for the combobox load-more sentinel item.
  *
  * @tier primitive
  */
-export interface ComboboxLoadMoreItemProps extends DistributiveOmit<
-	RacListBoxLoadMoreItemProps,
-	'className'
-> {
-	className?: RacListBoxLoadMoreItemProps['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxLoadMoreItemProps = Prettify<_ComboboxLoadMoreItemProps>;
 
 export function ComboboxLoadMoreItem(props: ComboboxLoadMoreItemProps): JSX.Element {
 	const { size: sizeProp, ...loadMoreItemProps } = props;
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/listbox.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/listbox.tsx
index 5bb3315b..98ea63c6 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/listbox.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/listbox.tsx
@@ -7,17 +7,15 @@ import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import { useSlottedContext } from 'react-aria-components/slots';
 import * as styles from '../../recipes/combobox.css.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
-/**
- * Props for the styled listbox.
- *
- * @tier primitive
- */
-export interface ComboboxListBoxProps<T extends object> extends DistributiveOmit<
+type _ComboboxListBoxOmit<T extends object> = DistributiveOmit<
 	RacListBoxProps<T>,
 	'dependencies' | 'items'
-> {
+>;
+
+interface _ComboboxListBoxProps<T extends object> extends _ComboboxListBoxOmit<T> {
 	/** Item content for the listbox (render prop or static children). */
 	children?: RacListBoxProps<T>['children'];
 	/** Values that should invalidate the dynamic item cache. */
@@ -28,6 +26,13 @@ export interface ComboboxListBoxProps<T extends object> extends DistributiveOmit
 	loadMoreItem?: ReactNode;
 }
 
+/**
+ * Props for the styled listbox.
+ *
+ * @tier primitive
+ */
+export type ComboboxListBoxProps<T extends object> = Prettify<_ComboboxListBoxProps<T>>;
+
 /** Styled listbox for combobox options. */
 export function ComboboxListBox<T extends object>(props: ComboboxListBoxProps<T>): JSX.Element {
 	const { children, dependencies, items, loadMoreItem, ...listBoxProps } = props;
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/popover.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/popover.tsx
index d6fb17bb..5b15cc85 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/popover.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/popover.tsx
@@ -6,18 +6,23 @@ import { Popover as RacPopover } from 'react-aria-components/ComboBox';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/combobox.css.js';
 import { themeRootClassName } from '../../theme/index.js';
+import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import { useVisualViewportVars } from './use-visual-viewport-vars.js';
 
+type _ComboboxPopoverOmit = DistributiveOmit<RacPopoverProps, 'UNSTABLE_portalContainer'>;
+interface _ComboboxPopoverProps extends _ComboboxPopoverOmit {
+	/** Forwarded to the popover's DOM element. */
+	ref?: Ref<HTMLElement>;
+}
+
 /**
  * Props for the styled combobox popover.
  *
  * @tier primitive
  */
-export interface ComboboxPopoverProps extends Omit<RacPopoverProps, 'UNSTABLE_portalContainer'> {
-	/** Forwarded to the popover's DOM element. */
-	ref?: Ref<HTMLElement>;
-}
+export type ComboboxPopoverProps = Prettify<_ComboboxPopoverProps>;
 
 /**
  * Popover surface used for listbox content. The portal preserves the theme identity and explicit
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/root.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/root.tsx
index 773189e9..de4c0a48 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/root.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/root.tsx
@@ -4,6 +4,7 @@ import { ComboBox as RacComboBox } from 'react-aria-components/ComboBox';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/combobox.css.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import { ComboboxSizeProvider } from './size-context.js';
 
@@ -11,12 +12,7 @@ interface ComboboxVariantProps extends NonNullable<styles.ComboboxVariants> {}
 
 export type ComboboxSize = NonNullable<ComboboxVariantProps['size']>;
 
-/**
- * Props for the primitive combobox root.
- *
- * @tier primitive
- */
-export interface ComboboxRootProps<T extends object> extends DistributiveOmit<
+type _ComboboxRootOmit<T extends object> = DistributiveOmit<
 	RacComboBoxProps<T, 'single'>,
 	| 'defaultSelectedKey'
 	| 'defaultValue'
@@ -26,7 +22,9 @@ export interface ComboboxRootProps<T extends object> extends DistributiveOmit<
 	| 'selectedKey'
 	| 'selectionMode'
 	| 'value'
-> {
+>;
+
+interface _ComboboxRootProps<T extends object> extends _ComboboxRootOmit<T> {
 	/** Forwarded to the combobox root element. */
 	ref?: Ref<HTMLDivElement>;
 
@@ -51,6 +49,13 @@ export interface ComboboxRootProps<T extends object> extends DistributiveOmit<
 	value?: Key | null;
 }
 
+/**
+ * Props for the primitive combobox root.
+ *
+ * @tier primitive
+ */
+export type ComboboxRootProps<T extends object> = Prettify<_ComboboxRootProps<T>>;
+
 export function ComboboxRoot<T extends object>(props: ComboboxRootProps<T>): JSX.Element {
 	const { className, menuTrigger = 'focus', ref, size = 'medium', ...comboboxProps } = props;
 
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/section.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/section.tsx
index a8216725..9e857e14 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/section.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/section.tsx
@@ -4,21 +4,26 @@ import { ListBoxSection as RacListBoxSection } from 'react-aria-components/Combo
 import { Header as RacHeader } from 'react-aria-components/Header';
 import * as styles from '../../recipes/combobox.css.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
-/**
- * Props for a combobox section grouping.
- *
- * @tier primitive
- */
-export interface ComboboxSectionProps<T extends object> extends DistributiveOmit<
+type _ComboboxSectionOmit<T extends object> = DistributiveOmit<
 	RacListBoxSectionProps<T>,
 	'className'
-> {
+>;
+
+interface _ComboboxSectionProps<T extends object> extends _ComboboxSectionOmit<T> {
 	className?: RacListBoxSectionProps<T>['className'];
 	title?: ReactNode;
 }
 
+/**
+ * Props for a combobox section grouping.
+ *
+ * @tier primitive
+ */
+export type ComboboxSectionProps<T extends object> = Prettify<_ComboboxSectionProps<T>>;
+
 export function ComboboxSection<T extends object>(props: ComboboxSectionProps<T>): JSX.Element {
 	const { children, className, title, ...sectionProps } = props;
 
diff --git a/packages/@luke-ui/react/src/combobox-field/primitive/trigger.tsx b/packages/@luke-ui/react/src/combobox-field/primitive/trigger.tsx
index 0a301416..d0a558f4 100644
--- a/packages/@luke-ui/react/src/combobox-field/primitive/trigger.tsx
+++ b/packages/@luke-ui/react/src/combobox-field/primitive/trigger.tsx
@@ -6,19 +6,23 @@ import { IconSizeProvider } from '../../icon-size-context/index.js';
 import * as styles from '../../recipes/combobox.css.js';
 import { COMBOBOX_ICON_SIZE } from '../../sizing/combobox-sizing.js';
 import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 import type { ComboboxSize } from './root.js';
 import { useComboboxSize } from './size-context.js';
 
+type _ComboboxTriggerOmit = DistributiveOmit<RacButtonProps, 'className'>;
+interface _ComboboxTriggerProps extends _ComboboxTriggerOmit {
+	className?: RacButtonProps['className'];
+	size?: ComboboxSize;
+}
+
 /**
  * Props for the combobox trigger button.
  *
  * @tier primitive
  */
-export interface ComboboxTriggerProps extends DistributiveOmit<RacButtonProps, 'className'> {
-	className?: RacButtonProps['className'];
-	size?: ComboboxSize;
-}
+export type ComboboxTriggerProps = Prettify<_ComboboxTriggerProps>;
 
 /** Trigger button used by combobox pattern. */
 export function ComboboxTrigger(props: ComboboxTriggerProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/emoji/index.tsx b/packages/@luke-ui/react/src/emoji/index.tsx
index 92693700..6798a4fa 100644
--- a/packages/@luke-ui/react/src/emoji/index.tsx
+++ b/packages/@luke-ui/react/src/emoji/index.tsx
@@ -1,19 +1,23 @@
 import type { TextProps } from '../text/index.js';
 import { Text } from '../text/index.js';
 import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 
-/**
- * Props for `Emoji`.
- *
- * @tier atom
- */
-export interface EmojiProps extends DistributiveOmit<TextProps, 'children' | 'elementType'> {
+type _EmojiOmit = DistributiveOmit<TextProps, 'children' | 'elementType'>;
+interface _EmojiProps extends _EmojiOmit {
 	/** Emoji character to render. */
 	emoji: string;
 	/** Accessible label announced by screen readers. */
 	label: string;
 }
 
+/**
+ * Props for `Emoji`.
+ *
+ * @tier atom
+ */
+export type EmojiProps = Prettify<_EmojiProps>;
+
 /** Accessible emoji output with the same typography props as `Text`. */
 export function Emoji(props: EmojiProps) {
 	const { emoji, label, ...textProps } = props;
diff --git a/packages/@luke-ui/react/src/field/compose-field.ts b/packages/@luke-ui/react/src/field/compose-field.ts
index 53c171dc..90ef3b3b 100644
--- a/packages/@luke-ui/react/src/field/compose-field.ts
+++ b/packages/@luke-ui/react/src/field/compose-field.ts
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { FieldErrorProps } from './primitive/error.js';
 import type { FieldNecessityIndicator } from './primitive/label.js';
 
@@ -13,11 +14,17 @@ export interface FieldSlotProps {
 	necessityIndicator?: FieldNecessityIndicator;
 }
 
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+type FieldSlotKeys<T extends FieldSlotProps> = Extract<keyof FieldSlotProps, KeysOfUnion<T>>;
+
 /** Splits the `Field` slot props (label/description/errorMessage/necessityIndicator) off a Composed field's props. */
 export function composeField<T extends FieldSlotProps>(
 	props: T,
-): [FieldSlotProps, Omit<T, keyof FieldSlotProps>] {
+): [FieldSlotProps, DistributiveOmit<T, FieldSlotKeys<T>>] {
 	const { description, errorMessage, label, necessityIndicator, ...restProps } = props;
 
-	return [{ description, errorMessage, label, necessityIndicator }, restProps];
+	return [
+		{ description, errorMessage, label, necessityIndicator },
+		restProps as unknown as DistributiveOmit<T, FieldSlotKeys<T>>,
+	];
 }
diff --git a/packages/@luke-ui/react/src/field/primitive/description.tsx b/packages/@luke-ui/react/src/field/primitive/description.tsx
index 77c910ba..2b71f123 100644
--- a/packages/@luke-ui/react/src/field/primitive/description.tsx
+++ b/packages/@luke-ui/react/src/field/primitive/description.tsx
@@ -2,17 +2,22 @@ import type { JSX } from 'react';
 import type { TextProps as RacTextProps } from 'react-aria-components/Text';
 import { Text as RacText } from 'react-aria-components/Text';
 import * as styles from '../../recipes/field.css.js';
+import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
 interface FieldMessageVariantProps extends NonNullable<styles.FieldMessageVariants> {}
 
+type _FieldDescriptionOmit1 = DistributiveOmit<RacTextProps, 'slot'>;
+type _FieldDescriptionOmit2 = DistributiveOmit<FieldMessageVariantProps, 'tone'>;
+interface _FieldDescriptionProps extends _FieldDescriptionOmit1, _FieldDescriptionOmit2 {}
+
 /**
  * Props for `FieldDescription`.
  *
  * @tier primitive
  */
-export interface FieldDescriptionProps
-	extends Omit<RacTextProps, 'slot'>, Omit<FieldMessageVariantProps, 'tone'> {}
+export type FieldDescriptionProps = Prettify<_FieldDescriptionProps>;
 
 /** Styled helper text shown under a field. */
 export function FieldDescription(props: FieldDescriptionProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/field/primitive/error.tsx b/packages/@luke-ui/react/src/field/primitive/error.tsx
index c2c1c716..96efb135 100644
--- a/packages/@luke-ui/react/src/field/primitive/error.tsx
+++ b/packages/@luke-ui/react/src/field/primitive/error.tsx
@@ -3,17 +3,21 @@ import type { FieldErrorProps as RacFieldErrorProps } from 'react-aria-component
 import { FieldError as RacFieldError } from 'react-aria-components/FieldError';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/field.css.js';
+import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
 interface FieldMessageVariantProps extends NonNullable<styles.FieldMessageVariants> {}
 
+type _FieldErrorOmit = DistributiveOmit<FieldMessageVariantProps, 'tone'>;
+interface _FieldErrorProps extends RacFieldErrorProps, _FieldErrorOmit {}
+
 /**
  * Props for `FieldError`.
  *
  * @tier primitive
  */
-export interface FieldErrorProps
-	extends RacFieldErrorProps, Omit<FieldMessageVariantProps, 'tone'> {}
+export type FieldErrorProps = Prettify<_FieldErrorProps>;
 
 /** Styled validation message for a field. */
 export function FieldError(props: FieldErrorProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/field/primitive/index.tsx b/packages/@luke-ui/react/src/field/primitive/index.tsx
index e8dbcb94..94b4662e 100644
--- a/packages/@luke-ui/react/src/field/primitive/index.tsx
+++ b/packages/@luke-ui/react/src/field/primitive/index.tsx
@@ -1,4 +1,6 @@
 import type { ComponentProps, JSX, ReactNode } from 'react';
+import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import type { FieldSlotProps } from '../compose-field.js';
 import type { FieldDescriptionProps } from './description.js';
 import { FieldDescription } from './description.js';
@@ -13,14 +15,17 @@ export { FieldDescription, FieldError, FieldLabel };
 
 type PrimitiveFieldProps = ComponentProps<typeof PrimitiveField>;
 
+type _FieldOmit = DistributiveOmit<PrimitiveFieldProps, 'children'>;
+interface _FieldProps extends _FieldOmit, FieldSlotProps {
+	children: ReactNode;
+}
+
 /**
  * Props for the composed `Field`.
  *
  * @tier primitive
  */
-export interface FieldProps extends Omit<PrimitiveFieldProps, 'children'>, FieldSlotProps {
-	children: ReactNode;
-}
+export type FieldProps = Prettify<_FieldProps>;
 
 /** Composes label, control slot, description, and error text. */
 export function Field(props: FieldProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/field/primitive/label.tsx b/packages/@luke-ui/react/src/field/primitive/label.tsx
index 5d213768..6a1e3559 100644
--- a/packages/@luke-ui/react/src/field/primitive/label.tsx
+++ b/packages/@luke-ui/react/src/field/primitive/label.tsx
@@ -2,6 +2,7 @@ import type { JSX } from 'react';
 import type { LabelProps as RacLabelProps } from 'react-aria-components/Label';
 import { Label as RacLabel } from 'react-aria-components/Label';
 import * as styles from '../../recipes/field.css.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
 interface FieldLabelVariantProps extends NonNullable<styles.FieldLabelVariants> {}
@@ -14,13 +15,14 @@ interface FieldLabelStyleProps {
 	necessityIndicator?: FieldNecessityIndicator;
 }
 
+interface _FieldLabelProps extends RacLabelProps, FieldLabelStyleProps {}
+
 /**
  * Props for `FieldLabel`.
  *
  * @tier primitive
  */
-export interface FieldLabelProps
-	extends Omit<RacLabelProps, keyof FieldLabelStyleProps>, FieldLabelStyleProps {}
+export type FieldLabelProps = Prettify<_FieldLabelProps>;
 
 /** Styled label for form fields. */
 export function FieldLabel(props: FieldLabelProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/heading/index.tsx b/packages/@luke-ui/react/src/heading/index.tsx
index 952ba34b..1e7ce8c4 100644
--- a/packages/@luke-ui/react/src/heading/index.tsx
+++ b/packages/@luke-ui/react/src/heading/index.tsx
@@ -2,20 +2,23 @@ import type { HeadingLevel, HeadingLevelsProps } from '../heading-context/index.
 import { HeadingLevels, HeadingPresenceProvider } from '../heading-context/index.js';
 import type { TextProps } from '../text/index.js';
 import { Text } from '../text/index.js';
+import type { Prettify } from '../types/prettify.js';
 
 export type { HeadingLevel } from '../heading-context/index.js';
 /** Valid heading tag name for Luke UI headings. */
 export type HeadingTag = `h${HeadingLevel}`;
 
+interface _HeadingProps extends TextProps {
+	/** Heading level override. Inherits from context when omitted. */
+	level?: HeadingLevel;
+}
+
 /**
  * Props for `Heading`.
  *
  * @tier atom
  */
-export interface HeadingProps extends TextProps {
-	/** Heading level override. Inherits from context when omitted. */
-	level?: HeadingLevel;
-}
+export type HeadingProps = Prettify<_HeadingProps>;
 
 const sizeByLevel = {
 	1: '800',
diff --git a/packages/@luke-ui/react/src/icon-button/index.tsx b/packages/@luke-ui/react/src/icon-button/index.tsx
index 84bee1ef..5811c4b0 100644
--- a/packages/@luke-ui/react/src/icon-button/index.tsx
+++ b/packages/@luke-ui/react/src/icon-button/index.tsx
@@ -5,7 +5,9 @@ import { Button } from '../button/primitive/index.js';
 import type { IconName } from '../icon/index.js';
 import { Icon } from '../icon/index.js';
 import * as styles from '../recipes/icon-button.css.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { DocumentedPressProps } from '../types/documented-rac-props.js';
+import type { Prettify } from '../types/prettify.js';
 import { cx } from '../utils/index.js';
 
 interface IconButtonRecipeProps extends NonNullable<styles.IconButtonVariants> {}
@@ -18,19 +20,19 @@ interface IconButtonStyleProps {
 	size?: IconButtonRecipeProps['size'];
 }
 
+type _IconButtonOmit = DistributiveOmit<PrimitiveButtonProps, 'size' | keyof DocumentedPressProps>;
+
+interface _IconButtonProps extends _IconButtonOmit, IconButtonStyleProps, DocumentedPressProps {
+	/** Icon name from the generated icon set. */
+	icon: IconName;
+}
+
 /**
  * Props for `IconButton`.
  *
  * @tier composed
  */
-export interface IconButtonProps
-	extends
-		Omit<PrimitiveButtonProps, keyof IconButtonStyleProps | keyof DocumentedPressProps>,
-		IconButtonStyleProps,
-		DocumentedPressProps {
-	/** Icon name from the generated icon set. */
-	icon: IconName;
-}
+export type IconButtonProps = Prettify<_IconButtonProps>;
 
 /** Button that renders only an icon. */
 export function IconButton(props: IconButtonProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/icon-size-context/index.tsx b/packages/@luke-ui/react/src/icon-size-context/index.tsx
index 54d22e08..06a774a8 100644
--- a/packages/@luke-ui/react/src/icon-size-context/index.tsx
+++ b/packages/@luke-ui/react/src/icon-size-context/index.tsx
@@ -1,13 +1,13 @@
 import type { JSX, ReactNode } from 'react';
 import { createContext, useContext } from 'react';
-import type { IconSizeToken } from '../tokens/index.js';
+import type { IconSize } from '../types/icon-size.js';
 
-const IconSizeContext = createContext<IconSizeToken | null>(null);
+const IconSizeContext = createContext<IconSize | null>(null);
 
 /** Props for `IconSizeProvider`. */
 interface IconSizeProviderProps {
 	children: ReactNode;
-	size: IconSizeToken;
+	size: IconSize;
 }
 
 /** Provides a default icon size to nested icon components. */
@@ -16,6 +16,6 @@ export function IconSizeProvider({ children, size }: IconSizeProviderProps): JSX
 }
 
 /** Reads the icon size from context, if provided. */
-export function useIconSizeContext(): IconSizeToken | null {
+export function useIconSizeContext(): IconSize | null {
 	return useContext(IconSizeContext);
 }
diff --git a/packages/@luke-ui/react/src/icon/icon.stories.tsx b/packages/@luke-ui/react/src/icon/icon.stories.tsx
index e2d154e6..a0b8aca1 100644
--- a/packages/@luke-ui/react/src/icon/icon.stories.tsx
+++ b/packages/@luke-ui/react/src/icon/icon.stories.tsx
@@ -61,7 +61,7 @@ export const Default = meta.story({
 });
 
 /**
- * Size maps to the icon size tokens: `xsmall`, `small`, `medium`, and `large`.
+ * Size uses the semantic icon steps `xsmall`, `small`, `medium`, and `large`.
  */
 export const Sizes = meta.story({
 	args: baseArgs,
diff --git a/packages/@luke-ui/react/src/icon/icon.visual.test.tsx b/packages/@luke-ui/react/src/icon/icon.visual.test.tsx
index b4254142..743c0e17 100644
--- a/packages/@luke-ui/react/src/icon/icon.visual.test.tsx
+++ b/packages/@luke-ui/react/src/icon/icon.visual.test.tsx
@@ -21,7 +21,7 @@ const sizes = variantValuesFor<typeof Icon, 'size'>()(['xsmall', 'small', 'mediu
 const names = variantValuesFor<typeof Icon, 'name'>()([
 	'add',
 	'checkCircle',
-	'critical',
+	'closeCircle',
 	'externalLink',
 	'search',
 ]);
diff --git a/packages/@luke-ui/react/src/icon/index.tsx b/packages/@luke-ui/react/src/icon/index.tsx
index d2b09ab5..0840c899 100644
--- a/packages/@luke-ui/react/src/icon/index.tsx
+++ b/packages/@luke-ui/react/src/icon/index.tsx
@@ -5,6 +5,7 @@ import { useIconSizeContext } from '../icon-size-context/index.js';
 import * as styles from '../recipes/icon.css.js';
 import { ICON_VIEWBOX } from '../sizing/icon-sizing.js';
 import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 import { cx } from '../utils/index.js';
 
 export type { IconName } from '../../.generated/icon-data.js';
@@ -37,21 +38,22 @@ export function IconSpritesheetProvider({
 	return <IconSpritesheetContext.Provider value={href}>{children}</IconSpritesheetContext.Provider>;
 }
 
+interface _IconProps
+	extends
+		Pick<SVGAttributes<SVGSVGElement>, 'aria-hidden' | 'className' | 'id' | 'style' | 'viewBox'>,
+		IconStyleProps {
+	/** Icon name from the generated icon set. */
+	name: (typeof iconNames)[number];
+	/** Accessible label. When set, the icon is announced as an image. */
+	title?: string;
+}
+
 /**
  * Props for the built-in `Icon` component.
  *
  * @tier atom
  */
-export type IconProps = Pick<
-	SVGAttributes<SVGSVGElement>,
-	'aria-hidden' | 'className' | 'id' | 'style' | 'viewBox'
-> &
-	IconStyleProps & {
-		/** Icon name from the generated icon set. */
-		name: (typeof iconNames)[number];
-		/** Accessible label. When set, the icon is announced as an image. */
-		title?: string;
-	};
+export type IconProps = Prettify<_IconProps>;
 
 /** Props used by `createIcon` for custom icon components. */
 export type CustomIconProps = DistributiveOmit<IconProps, 'name'>;
@@ -115,10 +117,10 @@ function useIconSpritesheetHref(): string {
 	return href;
 }
 
-type SpritesheetIconProps = IconProps & {
+interface SpritesheetIconProps extends IconProps {
 	spritesheetHref: string;
 	name: (typeof iconNames)[number];
-};
+}
 
 const SpritesheetIcon = createIcon<SpritesheetIconProps>({
 	path: ({ name, spritesheetHref }) => <use href={`${spritesheetHref}#${name}`} />,
diff --git a/packages/@luke-ui/react/src/link/index.tsx b/packages/@luke-ui/react/src/link/index.tsx
index b9a3d0bd..13be38b9 100644
--- a/packages/@luke-ui/react/src/link/index.tsx
+++ b/packages/@luke-ui/react/src/link/index.tsx
@@ -3,7 +3,9 @@ import type { LinkProps as RacLinkProps } from 'react-aria-components/Link';
 import { Link as RacLink } from 'react-aria-components/Link';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../recipes/link.css.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { DocumentedLinkProps } from '../types/documented-rac-props.js';
+import type { Prettify } from '../types/prettify.js';
 import { cx } from '../utils/index.js';
 
 interface LinkVariantProps extends NonNullable<styles.LinkVariants> {}
@@ -15,16 +17,16 @@ interface LinkStyleProps {
 	tone?: LinkVariantProps['tone'];
 }
 
+type _LinkOmit = DistributiveOmit<RacLinkProps, keyof DocumentedLinkProps>;
+
+interface _LinkProps extends _LinkOmit, LinkStyleProps, DocumentedLinkProps {}
+
 /**
  * Props for the primitive link.
  *
  * @tier atom
  */
-export interface LinkProps
-	extends
-		Omit<RacLinkProps, keyof LinkStyleProps | keyof DocumentedLinkProps>,
-		LinkStyleProps,
-		DocumentedLinkProps {}
+export type LinkProps = Prettify<_LinkProps>;
 
 /** Styled link. */
 export function Link(props: LinkProps): JSX.Element {
diff --git a/packages/@luke-ui/react/src/loading-skeleton/index.tsx b/packages/@luke-ui/react/src/loading-skeleton/index.tsx
index eb3f8bcd..183b25a2 100644
--- a/packages/@luke-ui/react/src/loading-skeleton/index.tsx
+++ b/packages/@luke-ui/react/src/loading-skeleton/index.tsx
@@ -2,6 +2,7 @@ import type { ComponentProps, ElementType, JSX, ReactNode } from 'react';
 import { createContext, isValidElement, useContext } from 'react';
 import * as styles from '../recipes/loading-skeleton.css.js';
 import { vars } from '../theme/contract.css.js';
+import type { Prettify } from '../types/prettify.js';
 import { useSynchronizeAnimations } from '../use-synchronize-animations/use-synchronize-animations.js';
 import { cx } from '../utils/index.js';
 
@@ -22,12 +23,7 @@ export function LoadingSkeletonProvider(props: LoadingSkeletonProviderProps): JS
 	);
 }
 
-/**
- * Props for `LoadingSkeleton`.
- *
- * @tier atom
- */
-export interface LoadingSkeletonProps extends ComponentProps<'span'> {
+interface _LoadingSkeletonProps extends ComponentProps<'span'> {
 	/**
 	 * Element rendered while loading.
 	 * @default 'span'
@@ -45,6 +41,13 @@ export interface LoadingSkeletonProps extends ComponentProps<'span'> {
 	isLoading?: boolean;
 }
 
+/**
+ * Props for `LoadingSkeleton`.
+ *
+ * @tier atom
+ */
+export type LoadingSkeletonProps = Prettify<_LoadingSkeletonProps>;
+
 /**
  * Placeholder that mirrors the layout of loading content. Wrap text for an inline skeleton sized to the text, or
  * wrap a component to paint a skeleton over it while preserving its footprint. All skeletons pulse in sync.
diff --git a/packages/@luke-ui/react/src/loading-spinner/index.tsx b/packages/@luke-ui/react/src/loading-spinner/index.tsx
index df07edd7..f20537eb 100644
--- a/packages/@luke-ui/react/src/loading-spinner/index.tsx
+++ b/packages/@luke-ui/react/src/loading-spinner/index.tsx
@@ -9,6 +9,7 @@ import {
 	SPINNER_STROKE_WIDTH,
 } from '../sizing/icon-sizing.js';
 import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 import { useSynchronizeAnimations } from '../use-synchronize-animations/use-synchronize-animations.js';
 import { cx } from '../utils/index.js';
 
@@ -21,29 +22,32 @@ interface LoadingSpinnerStyleProps {
 	size?: LoadingSpinnerVariantProps['size'];
 }
 
+type _LoadingSpinnerOmit = DistributiveOmit<
+	ComponentProps<'div'>,
+	'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'color' | 'role'
+>;
+
+interface _LoadingSpinnerProps extends _LoadingSpinnerOmit, LoadingSpinnerStyleProps {
+	/**
+	 * Max value for determinate mode.
+	 * @default 100
+	 */
+	maxValue?: number;
+	/**
+	 * Min value for determinate mode.
+	 * @default 0
+	 */
+	minValue?: number;
+	/** Current value. Omit for indeterminate mode. */
+	value?: number;
+}
+
 /**
  * Props for `LoadingSpinner`.
  *
  * @tier atom
  */
-export type LoadingSpinnerProps = DistributiveOmit<
-	ComponentProps<'div'>,
-	'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'color' | 'role'
-> &
-	LoadingSpinnerStyleProps & {
-		/**
-		 * Max value for determinate mode.
-		 * @default 100
-		 */
-		maxValue?: number;
-		/**
-		 * Min value for determinate mode.
-		 * @default 0
-		 */
-		minValue?: number;
-		/** Current value. Omit for indeterminate mode. */
-		value?: number;
-	};
+export type LoadingSpinnerProps = Prettify<_LoadingSpinnerProps>;
 
 /** Progress spinner for determinate or indeterminate loading state. */
 export function LoadingSpinner(props: LoadingSpinnerProps) {
diff --git a/packages/@luke-ui/react/src/numeral/index.tsx b/packages/@luke-ui/react/src/numeral/index.tsx
index aa071881..23256cf4 100644
--- a/packages/@luke-ui/react/src/numeral/index.tsx
+++ b/packages/@luke-ui/react/src/numeral/index.tsx
@@ -2,6 +2,8 @@ import { useLocale } from 'react-aria-components/I18nProvider';
 import { useIsWithinHeading } from '../heading-context/index.js';
 import type { TextProps } from '../text/index.js';
 import { Text } from '../text/index.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 
 /** Number format style used by `Numeral`. */
 export type NumeralFormat = 'decimal' | 'percent' | 'currency' | 'unit';
@@ -10,15 +12,8 @@ export type NumeralAbbreviation = boolean | 'long';
 /** Fixed precision or `[min, max]` precision range. */
 export type NumeralPrecision = number | readonly [number, number];
 
-/**
- * Props for `Numeral`.
- *
- * @tier atom
- */
-export interface NumeralProps extends Omit<
-	TextProps,
-	'children' | 'textAlign' | 'fontVariantNumeric'
-> {
+type _NumeralOmit = DistributiveOmit<TextProps, 'children' | 'textAlign' | 'fontVariantNumeric'>;
+interface _NumeralProps extends _NumeralOmit {
 	/** Enables compact notation (`1.2K`, `1.2 thousand`). */
 	abbreviate?: NumeralAbbreviation;
 	/** Currency code such as `USD`. */
@@ -47,6 +42,13 @@ export interface NumeralProps extends Omit<
 	value: number;
 }
 
+/**
+ * Props for `Numeral`.
+ *
+ * @tier atom
+ */
+export type NumeralProps = Prettify<_NumeralProps>;
+
 /** Formats a number and renders it with the same typography props as `Text`. */
 export function Numeral(props: NumeralProps) {
 	const { locale: localeFromContext } = useLocale();
@@ -110,6 +112,13 @@ function resolvePrecisionRange(precision: NumeralPrecision): readonly [number, n
 	return precision;
 }
 
+interface ResolveNumeralFormatOptionsProps extends Pick<
+	NumeralProps,
+	'abbreviate' | 'currency' | 'formatOptions' | 'precision' | 'unit'
+> {
+	format: NumeralFormat;
+}
+
 function resolveNumeralFormatOptions({
 	abbreviate,
 	currency,
@@ -117,9 +126,7 @@ function resolveNumeralFormatOptions({
 	formatOptions,
 	precision,
 	unit,
-}: Pick<NumeralProps, 'abbreviate' | 'currency' | 'formatOptions' | 'precision' | 'unit'> & {
-	format: NumeralFormat;
-}): Intl.NumberFormatOptions {
+}: ResolveNumeralFormatOptionsProps): Intl.NumberFormatOptions {
 	const options: Intl.NumberFormatOptions = { ...formatOptions, style: format };
 
 	if (format === 'currency') {
diff --git a/packages/@luke-ui/react/src/recipes/button-composed.css.ts b/packages/@luke-ui/react/src/recipes/button-composed.css.ts
index 92e4be43..c4c5aac9 100644
--- a/packages/@luke-ui/react/src/recipes/button-composed.css.ts
+++ b/packages/@luke-ui/react/src/recipes/button-composed.css.ts
@@ -1,7 +1,6 @@
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import { recipeInLayer } from '../styles/layered-style.css.js';
-import { vars } from '../styles/vars.css.js';
-import { vars as themeVars } from '../theme/contract.css.js';
+import { vars } from '../theme/contract.css.js';
 
 export const buttonContent = recipeInLayer('recipes', {
 	base: {
@@ -16,7 +15,7 @@ export const buttonLabel = recipeInLayer('recipes', {
 	base: {
 		alignItems: 'center',
 		display: 'inline-flex',
-		gap: vars.space.xsmall,
+		gap: vars.space[200],
 		minInlineSize: 0,
 	},
 	defaultVariants: {
@@ -42,7 +41,7 @@ export const spinnerOverlay = recipeInLayer('recipes', {
 			},
 		},
 		alignItems: 'center',
-		color: themeVars.color.border.focus,
+		color: vars.color.border.focus,
 		display: 'flex',
 		inset: 0,
 		justifyContent: 'center',
diff --git a/packages/@luke-ui/react/src/recipes/index.ts b/packages/@luke-ui/react/src/recipes/index.ts
index 00806596..f9eba261 100644
--- a/packages/@luke-ui/react/src/recipes/index.ts
+++ b/packages/@luke-ui/react/src/recipes/index.ts
@@ -2,7 +2,7 @@ export type { ButtonVariants } from '../recipes/button.css.js';
 export { button } from '../recipes/button.css.js';
 export { field, fieldLabel, fieldMessage } from '../recipes/field.css.js';
 export type { IconVariants } from '../recipes/icon.css.js';
-export { icon, iconSizeVariants } from '../recipes/icon.css.js';
+export { icon } from '../recipes/icon.css.js';
 export type { IconButtonVariants } from '../recipes/icon-button.css.js';
 export { iconButton } from '../recipes/icon-button.css.js';
 export type { LinkVariants } from '../recipes/link.css.js';
diff --git a/packages/@luke-ui/react/src/sizing/button-sizing.ts b/packages/@luke-ui/react/src/sizing/button-sizing.ts
index d1ada641..3bb72f70 100644
--- a/packages/@luke-ui/react/src/sizing/button-sizing.ts
+++ b/packages/@luke-ui/react/src/sizing/button-sizing.ts
@@ -1,7 +1,7 @@
-import type { IconSizeToken } from '../tokens/index.js';
+import type { IconSize } from '../types/icon-size.js';
 
 /** Maps button size to the appropriate icon/spinner size. */
-export const BUTTON_ICON_SIZE: Record<'medium' | 'small', IconSizeToken> = {
+export const BUTTON_ICON_SIZE: Record<'medium' | 'small', IconSize> = {
 	medium: 'medium',
 	small: 'xsmall',
 };
diff --git a/packages/@luke-ui/react/src/sizing/combobox-sizing.ts b/packages/@luke-ui/react/src/sizing/combobox-sizing.ts
index 8d74fef9..653d7a1c 100644
--- a/packages/@luke-ui/react/src/sizing/combobox-sizing.ts
+++ b/packages/@luke-ui/react/src/sizing/combobox-sizing.ts
@@ -1,7 +1,7 @@
-import type { IconSizeToken } from '../tokens/index.js';
+import type { IconSize } from '../types/icon-size.js';
 
 /** Maps combobox control size to the appropriate icon size. */
-export const COMBOBOX_ICON_SIZE: Record<'medium' | 'small', IconSizeToken> = {
+export const COMBOBOX_ICON_SIZE: Record<'medium' | 'small', IconSize> = {
 	medium: 'small',
 	small: 'xsmall',
 };
diff --git a/packages/@luke-ui/react/src/styles/index.css.ts b/packages/@luke-ui/react/src/styles/index.css.ts
index 54613b86..84e8d6f5 100644
--- a/packages/@luke-ui/react/src/styles/index.css.ts
+++ b/packages/@luke-ui/react/src/styles/index.css.ts
@@ -1,3 +1,3 @@
-import './vars.css.js';
 import './reset.css.js';
 import './primitives.css.js';
+import './theme-root.css.js';
diff --git a/packages/@luke-ui/react/src/styles/package-exports.test.ts b/packages/@luke-ui/react/src/styles/package-exports.test.ts
new file mode 100644
index 00000000..919423de
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/package-exports.test.ts
@@ -0,0 +1,12 @@
+import { expect, test } from 'vite-plus/test';
+import packageJson from '../../package.json' with { type: 'json' };
+
+test('publishes only the final styling entrypoints', () => {
+	expect(packageJson.exports['./box']).toBe('./dist/box/index.js');
+	expect(packageJson.exports['./theme']).toBe('./dist/theme/index.js');
+	expect(packageJson.exports['./themes']).toBe('./dist/themes/index.js');
+	expect(packageJson.exports['./recipes']).toBe('./dist/recipes/index.js');
+	expect(packageJson.exports['./styles']).toBe('./dist/styles/index.js');
+	expect(packageJson.exports['./stylesheet.css']).toBe('./dist/stylesheet.css');
+	expect('./tokens' in packageJson.exports).toBe(false);
+});
diff --git a/packages/@luke-ui/react/src/styles/reset.css.ts b/packages/@luke-ui/react/src/styles/reset.css.ts
index 7fd3d9d1..6179e7e0 100644
--- a/packages/@luke-ui/react/src/styles/reset.css.ts
+++ b/packages/@luke-ui/react/src/styles/reset.css.ts
@@ -1,7 +1,7 @@
+import { vars } from '../theme/contract.css.js';
 import { classSelector, lukeUiClassNames } from './class-names.js';
 import { focusRing } from './focus-ring.js';
 import { globalStyleInLayer } from './layered-style.css.js';
-import { vars } from './vars.css.js';
 
 const root = classSelector(lukeUiClassNames.resetRoot);
 
@@ -72,7 +72,7 @@ globalStyleInLayer('reset', `${root} :where(:disabled, [data-disabled="true"])`,
 });
 
 globalStyleInLayer('reset', `${root} :where(:focus-visible)`, {
-	...focusRing(vars.themeColor.focusRingColor),
+	...focusRing(vars.color.border.focus),
 
 	'@media': {
 		'(forced-colors: active)': {
diff --git a/packages/@luke-ui/react/src/styles/stylesheet-size.test.ts b/packages/@luke-ui/react/src/styles/stylesheet-size.test.ts
new file mode 100644
index 00000000..4ff02e78
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/stylesheet-size.test.ts
@@ -0,0 +1,16 @@
+import { gzipSync } from 'node:zlib';
+import { readFile } from 'node:fs/promises';
+import { expect, test } from 'vite-plus/test';
+
+// Keep the public bundle below its pre-Sprinkles baseline while leaving room for normal growth.
+const maximumRawBytes = 85_000;
+const maximumGzipBytes = 8_800;
+
+test('keeps the public stylesheet within its size budget', async () => {
+	const stylesheet = await readFile(new URL('../../dist/stylesheet.css', import.meta.url));
+
+	expect(stylesheet.byteLength, 'raw stylesheet size').toBeLessThanOrEqual(maximumRawBytes);
+	expect(gzipSync(stylesheet, { level: 9 }).byteLength, 'gzip stylesheet size').toBeLessThanOrEqual(
+		maximumGzipBytes,
+	);
+});
diff --git a/packages/@luke-ui/react/src/styles/theme-root.css.ts b/packages/@luke-ui/react/src/styles/theme-root.css.ts
new file mode 100644
index 00000000..288567e5
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/theme-root.css.ts
@@ -0,0 +1,10 @@
+import { vars } from '../theme/contract.css.js';
+import { classSelector, lukeUiClassNames } from './class-names.js';
+import { globalStyleInLayer } from './layered-style.css.js';
+
+globalStyleInLayer('theme', classSelector(lukeUiClassNames.themeRoot), {
+	accentColor: vars.color.intent.accent.surface.solid,
+	color: vars.color.text.primary,
+	fontFamily: vars.font.family,
+	...vars.font[300],
+});
diff --git a/packages/@luke-ui/react/src/styles/utilities.browser.test.ts b/packages/@luke-ui/react/src/styles/utilities.browser.test.ts
new file mode 100644
index 00000000..8c0c39e7
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/utilities.browser.test.ts
@@ -0,0 +1,96 @@
+import '../../dist/themes/machined-edge.css';
+import '../stylesheet.css.js';
+import { afterEach, expect, test } from 'vite-plus/test';
+import { page } from 'vite-plus/test/context';
+import { machinedEdgeThemeClassName } from '../themes/index.js';
+import { mergeProps } from '../utils/index.js';
+import { createSprinkles } from './index.js';
+
+const mounted: Array<HTMLElement> = [];
+
+afterEach(async () => {
+	for (const element of mounted) element.remove();
+	mounted.length = 0;
+	await page.viewport(1024, 800);
+});
+
+test('applies every retained breakpoint responsively', async () => {
+	const element = mount(
+		createSprinkles({
+			padding: {
+				large: '400',
+				medium: '300',
+				small: '200',
+				xlarge: '600',
+				xsmall: '100',
+				xxlarge: '800',
+			},
+		}),
+	);
+
+	const breakpoints = [
+		{ expected: '4px', name: 'xsmall', width: 320 },
+		{ expected: '8px', name: 'small', width: 640 },
+		{ expected: '12px', name: 'medium', width: 768 },
+		{ expected: '16px', name: 'large', width: 1024 },
+		{ expected: '24px', name: 'xlarge', width: 1280 },
+		{ expected: '32px', name: 'xxlarge', width: 1536 },
+	] as const;
+
+	for (const breakpoint of breakpoints) {
+		// eslint-disable-next-line no-await-in-loop -- viewport changes must be observed in order
+		await page.viewport(breakpoint.width, 800);
+		expect(getComputedStyle(element).padding).toBe(breakpoint.expected);
+	}
+});
+
+test('resolves every semantic space step including zero', () => {
+	const spaces = [
+		{ expected: '0px', step: '0' },
+		{ expected: '4px', step: '100' },
+		{ expected: '8px', step: '200' },
+		{ expected: '12px', step: '300' },
+		{ expected: '16px', step: '400' },
+		{ expected: '24px', step: '600' },
+		{ expected: '32px', step: '800' },
+		{ expected: '40px', step: '1000' },
+		{ expected: '48px', step: '1200' },
+		{ expected: '64px', step: '1600' },
+	] as const;
+
+	for (const space of spaces) {
+		const element = mount(createSprinkles({ padding: space.step }));
+		expect(getComputedStyle(element).padding).toBe(space.expected);
+	}
+});
+
+test('returns class and style output that merges with consumer props', () => {
+	const generated = createSprinkles({
+		display: 'grid',
+		inlineSize: 'calc(100% - 2rem)',
+		padding: '400',
+	});
+	const props = mergeProps(generated, {
+		className: 'consumer-class',
+		style: { backgroundColor: 'rgb(1, 2, 3)' },
+	});
+	const element = mount(props);
+
+	expect(element.classList).toContain('consumer-class');
+	expect(Object.keys(generated.style)).not.toHaveLength(0);
+	expect(getComputedStyle(element).display).toBe('grid');
+	expect(getComputedStyle(element).inlineSize).toBe(`${document.body.clientWidth - 32}px`);
+	expect(getComputedStyle(element).padding).toBe('16px');
+	expect(getComputedStyle(element).backgroundColor).toBe('rgb(1, 2, 3)');
+});
+
+function mount(props: { className?: string; style?: Record<string, unknown> }): HTMLElement {
+	const element = document.body.appendChild(document.createElement('div'));
+	mounted.push(element);
+	element.className = `${machinedEdgeThemeClassName} ${props.className ?? ''}`;
+	Object.assign(element.style, props.style);
+	for (const [property, value] of Object.entries(props.style ?? {})) {
+		if (property.startsWith('--')) element.style.setProperty(property, String(value));
+	}
+	return element;
+}
diff --git a/packages/@luke-ui/react/src/styles/utilities.css.ts b/packages/@luke-ui/react/src/styles/utilities.css.ts
index e8cb2d7f..e2e0a0b8 100644
--- a/packages/@luke-ui/react/src/styles/utilities.css.ts
+++ b/packages/@luke-ui/react/src/styles/utilities.css.ts
@@ -1,46 +1,154 @@
 import type { SprinklesFn } from '@luke-ui/rainbow-sprinkles';
 import { defineProperties, defineSprinkles } from '@luke-ui/rainbow-sprinkles';
-import type { TokenName } from '../tokens/index.js';
-import { tokenKeys, tokens } from '../tokens/index.js';
+import { vars } from '../theme/contract.css.js';
 import { layers } from './layers.css.js';
-import { vars } from './vars.css.js';
-
-// Builds a { [tokenKey]: cssVar } record while preserving the literal key type union.
-function tokenScale<TGroup extends { $type: string }>(
-	group: TGroup,
-	varRecord: { readonly [K in TokenName<TGroup>]: string },
-): { [K in TokenName<TGroup>]: string } {
-	const scale = {} as { [K in TokenName<TGroup>]: string };
-	for (const key of tokenKeys(group)) {
-		scale[key] = varRecord[key];
-	}
-	return scale;
-}
-
-const breakpointNames = tokenKeys(tokens.breakpoints);
-const layerName = layers.utilities;
 
 const responsiveConditions = {
 	xsmall: {},
-	...Object.fromEntries(
-		breakpointNames.map((bp) => [
-			bp,
-			{
-				'@media': `screen and (width >= ${tokens.breakpoints[bp].$value.value}${tokens.breakpoints[bp].$value.unit})`,
-			},
-		]),
-	),
-};
+	small: { '@media': 'screen and (width >= 640px)' },
+	medium: { '@media': 'screen and (width >= 768px)' },
+	large: { '@media': 'screen and (width >= 1024px)' },
+	xlarge: { '@media': 'screen and (width >= 1280px)' },
+	xxlarge: { '@media': 'screen and (width >= 1536px)' },
+} as const;
 
-const spaceScale = tokenScale(tokens.space, vars.space);
+const spaceScale = {
+	'0': '0',
+	'100': vars.space[100],
+	'200': vars.space[200],
+	'300': vars.space[300],
+	'400': vars.space[400],
+	'600': vars.space[600],
+	'800': vars.space[800],
+	'1000': vars.space[1000],
+	'1200': vars.space[1200],
+	'1600': vars.space[1600],
+} as const;
+
+const marginScale = { ...spaceScale, auto: 'auto' } as const;
 
 const responsiveProperties = defineProperties({
-	'@layer': layerName,
+	'@layer': layers.utilities,
 	conditions: responsiveConditions,
 	defaultCondition: 'xsmall',
 	dynamicProperties: {
+		alignContent: {
+			center: 'center',
+			'flex-end': 'flex-end',
+			'flex-start': 'flex-start',
+			normal: 'normal',
+			'space-around': 'space-around',
+			'space-between': 'space-between',
+			stretch: 'stretch',
+		},
+		alignItems: {
+			baseline: 'baseline',
+			center: 'center',
+			'flex-end': 'flex-end',
+			'flex-start': 'flex-start',
+			normal: 'normal',
+			stretch: 'stretch',
+		},
+		alignSelf: {
+			auto: 'auto',
+			baseline: 'baseline',
+			center: 'center',
+			'flex-end': 'flex-end',
+			'flex-start': 'flex-start',
+			normal: 'normal',
+			stretch: 'stretch',
+		},
+		blockSize: true,
 		columnGap: spaceScale,
+		display: {
+			block: 'block',
+			contents: 'contents',
+			flex: 'flex',
+			grid: 'grid',
+			inline: 'inline',
+			'inline-block': 'inline-block',
+			'inline-flex': 'inline-flex',
+			'inline-grid': 'inline-grid',
+			none: 'none',
+		},
+		flex: true,
+		flexBasis: true,
+		flexDirection: {
+			column: 'column',
+			'column-reverse': 'column-reverse',
+			row: 'row',
+			'row-reverse': 'row-reverse',
+		},
+		flexGrow: { '0': '0', '1': '1' },
+		flexShrink: { '0': '0', '1': '1' },
+		flexWrap: { nowrap: 'nowrap', wrap: 'wrap', 'wrap-reverse': 'wrap-reverse' },
 		gap: spaceScale,
+		gridArea: true,
+		gridColumn: true,
+		gridColumnEnd: true,
+		gridColumnStart: true,
+		gridRow: true,
+		gridRowEnd: true,
+		gridRowStart: true,
+		inlineSize: true,
+		inset: true,
+		insetBlock: true,
+		insetBlockEnd: true,
+		insetBlockStart: true,
+		insetInline: true,
+		insetInlineEnd: true,
+		insetInlineStart: true,
+		justifyContent: {
+			center: 'center',
+			'flex-end': 'flex-end',
+			'flex-start': 'flex-start',
+			normal: 'normal',
+			'space-around': 'space-around',
+			'space-between': 'space-between',
+			'space-evenly': 'space-evenly',
+			stretch: 'stretch',
+		},
+		justifySelf: {
+			auto: 'auto',
+			center: 'center',
+			end: 'end',
+			normal: 'normal',
+			start: 'start',
+			stretch: 'stretch',
+		},
+		margin: marginScale,
+		marginBlock: marginScale,
+		marginBlockEnd: marginScale,
+		marginBlockStart: marginScale,
+		marginInline: marginScale,
+		marginInlineEnd: marginScale,
+		marginInlineStart: marginScale,
+		maxBlockSize: true,
+		maxInlineSize: true,
+		minBlockSize: true,
+		minInlineSize: true,
+		order: true,
+		overflow: {
+			auto: 'auto',
+			clip: 'clip',
+			hidden: 'hidden',
+			scroll: 'scroll',
+			visible: 'visible',
+		},
+		overflowX: {
+			auto: 'auto',
+			clip: 'clip',
+			hidden: 'hidden',
+			scroll: 'scroll',
+			visible: 'visible',
+		},
+		overflowY: {
+			auto: 'auto',
+			clip: 'clip',
+			hidden: 'hidden',
+			scroll: 'scroll',
+			visible: 'visible',
+		},
 		padding: spaceScale,
 		paddingBlock: spaceScale,
 		paddingBlockEnd: spaceScale,
@@ -48,43 +156,26 @@ const responsiveProperties = defineProperties({
 		paddingInline: spaceScale,
 		paddingInlineEnd: spaceScale,
 		paddingInlineStart: spaceScale,
+		placeSelf: {
+			auto: 'auto',
+			center: 'center',
+			end: 'end',
+			normal: 'normal',
+			start: 'start',
+			stretch: 'stretch',
+		},
+		position: {
+			absolute: 'absolute',
+			fixed: 'fixed',
+			relative: 'relative',
+			static: 'static',
+			sticky: 'sticky',
+		},
 		rowGap: spaceScale,
 	},
-	staticProperties: {
-		alignItems: ['flex-start', 'center', 'flex-end', 'baseline', 'stretch'],
-		blockSize: ['auto', '100%', 'fit-content', 'min-content', 'max-content'],
-		display: ['flex', 'block', 'inline', 'inline-flex', 'none'],
-		flexBasis: ['auto', '0'],
-		flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
-		flexGrow: ['0', '1'],
-		flexShrink: ['0', '1'],
-		inlineSize: ['auto', '100%', 'fit-content', 'min-content', 'max-content'],
-		justifyContent: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around'],
-		maxBlockSize: ['100%', 'none', '20rem', '40rem'],
-		maxInlineSize: ['100%', 'none', '20rem', '40rem'],
-		minBlockSize: ['0', '100%'],
-		minInlineSize: ['0', '100%'],
-		overflow: ['visible', 'hidden', 'auto', 'scroll', 'clip'],
-		overflowX: ['visible', 'hidden', 'auto', 'scroll', 'clip'],
-		overflowY: ['visible', 'hidden', 'auto', 'scroll', 'clip'],
-		textOverflow: ['ellipsis', 'clip'],
-	},
-});
-
-const pseudoProperties = defineProperties({
-	'@layer': layerName,
-	conditions: {
-		default: {},
-		focusVisible: { selector: '&:focus-visible' },
-		hover: { selector: '&:hover' },
-	},
-	defaultCondition: 'default',
-	staticProperties: {
-		backgroundColor: tokenScale(tokens.backgroundColor, vars.backgroundColor),
-	},
 });
 
-export const createSprinkles: SprinklesFn<[typeof responsiveProperties, typeof pseudoProperties]> =
-	defineSprinkles(responsiveProperties, pseudoProperties);
+export const createSprinkles: SprinklesFn<[typeof responsiveProperties]> =
+	defineSprinkles(responsiveProperties);
 
 export type SprinklesProps = Parameters<typeof createSprinkles>[0];
diff --git a/packages/@luke-ui/react/src/styles/utilities.stories.tsx b/packages/@luke-ui/react/src/styles/utilities.stories.tsx
index b3048ac2..418a031d 100644
--- a/packages/@luke-ui/react/src/styles/utilities.stories.tsx
+++ b/packages/@luke-ui/react/src/styles/utilities.stories.tsx
@@ -3,25 +3,19 @@ import { createSprinkles } from '@luke-ui/react/styles';
 import { mergeProps } from '@luke-ui/react/utils';
 import type { CSSProperties } from 'react';
 import preview from '../../.storybook/preview.js';
-import { vars } from '../theme.css.js';
+import { vars } from '../theme/index.js';
 
 const meta = preview.meta({
 	title: 'Foundation/Utilities',
 });
 
 const panelStyle = {
-	borderColor: vars.border.default,
+	borderColor: vars.color.border.decorative,
 	borderStyle: 'dashed',
 	borderWidth: 1,
 	padding: '1rem',
 } as const satisfies CSSProperties;
 
-const stackStyle = {
-	display: 'flex',
-	flexDirection: 'column',
-	gap: '1rem',
-} as const satisfies CSSProperties;
-
 /**
  * `createSprinkles` returns a `className` and `style` object for token-aware, type-safe
  * layout utilities. Use it with any element's `className` and `style` props.
@@ -31,29 +25,29 @@ export const Layout = meta.story({
 		const container = createSprinkles({
 			display: 'flex',
 			flexDirection: 'column',
-			gap: 'medium',
-			padding: 'large',
+			gap: '400',
+			padding: '600',
 		});
 		const row = createSprinkles({
 			alignItems: 'center',
 			display: 'flex',
-			gap: 'small',
+			gap: '300',
 		});
 		return (
 			<div {...mergeProps({ style: panelStyle }, container)}>
 				<div {...row}>
 					<div
 						{...mergeProps(
-							{ style: { background: vars.backgroundColor.neutral } },
-							createSprinkles({ inlineSize: '100%', minInlineSize: '0', padding: 'medium' }),
+							{ style: { background: vars.color.surface.resting } },
+							createSprinkles({ inlineSize: '100%', minInlineSize: '0', padding: '400' }),
 						)}
 					>
 						Row item 1
 					</div>
 					<div
 						{...mergeProps(
-							{ style: { background: vars.backgroundColor.neutral } },
-							createSprinkles({ flexGrow: '1', padding: 'medium' }),
+							{ style: { background: vars.color.surface.resting } },
+							createSprinkles({ flexGrow: '1', padding: '400' }),
 						)}
 					>
 						Row item 2 (grows)
@@ -74,14 +68,14 @@ export const Responsive = meta.story({
 		const responsive = createSprinkles({
 			display: 'flex',
 			flexDirection: { medium: 'row', xsmall: 'column' },
-			gap: { medium: 'large', xsmall: 'small' },
-			padding: { large: 'xlarge', xsmall: 'small' },
+			gap: { medium: '600', xsmall: '300' },
+			padding: { large: '800', xsmall: '300' },
 		});
 		return (
 			<div {...mergeProps({ style: panelStyle }, responsive)}>
 				<div
 					style={{
-						background: vars.backgroundColor.neutral,
+						background: vars.color.surface.resting,
 						padding: '1rem',
 					}}
 				>
@@ -89,7 +83,7 @@ export const Responsive = meta.story({
 				</div>
 				<div
 					style={{
-						background: vars.backgroundColor.neutral,
+						background: vars.color.surface.resting,
 						padding: '1rem',
 					}}
 				>
@@ -100,26 +94,6 @@ export const Responsive = meta.story({
 	},
 });
 
-/**
- * Pseudo-state conditions apply styles on hover or focus-visible. Use
- * `backgroundColor` with a condition object.
- */
-export const PseudoStates = meta.story({
-	render: () => {
-		const interactive = createSprinkles({
-			backgroundColor: { default: 'neutral', focusVisible: 'input', hover: 'neutralHover' },
-			padding: 'medium',
-		});
-		return (
-			<div style={stackStyle}>
-				<button {...mergeProps({ type: 'button' }, interactive)}>
-					Hover or focus this button to see backgroundColor change
-				</button>
-			</div>
-		);
-	},
-});
-
 /**
  * Combine `createSprinkles` with React Aria Components' `render` prop to style the
  * underlying DOM element while preserving RAC behavior and accessibility.
@@ -128,13 +102,15 @@ export const PseudoStates = meta.story({
 export const WithRenderProp = meta.story({
 	render: () => {
 		const buttonBox = createSprinkles({
-			backgroundColor: { default: 'neutral', hover: 'neutralHover' },
-			padding: 'medium',
+			padding: '400',
+		});
+		const customStyle = mergeProps(buttonBox, {
+			style: { backgroundColor: vars.color.intent.accent.surface.solid },
 		});
 		return (
 			<Button
 				render={(props) => (
-					<button {...mergeProps(props, buttonBox)} type="button">
+					<button {...mergeProps(props, customStyle)} type="button">
 						Button with createSprinkles utilities
 					</button>
 				)}
@@ -146,9 +122,8 @@ export const WithRenderProp = meta.story({
 });
 
 /**
- * Overflow and sizing utilities control content clipping and element
- * dimensions. Use `textOverflow: 'ellipsis'` with `inlineSize` constraints
- * for truncation patterns.
+ * Sprinkles controls the layout and overflow needed for truncation. Consumer styles provide the
+ * single-line text behaviour that is deliberately outside the layout utility surface.
  */
 export const OverflowAndSizing = meta.story({
 	render: () => {
@@ -157,12 +132,14 @@ export const OverflowAndSizing = meta.story({
 			inlineSize: '100%',
 			maxInlineSize: '20rem',
 			minInlineSize: '0',
-			overflowX: 'clip',
-			textOverflow: 'ellipsis',
+			overflowX: 'hidden',
+		});
+		const truncateText = mergeProps(truncate, {
+			style: { textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
 		});
 		return (
-			<div style={stackStyle}>
-				<div {...truncate}>
+			<div>
+				<div {...truncateText}>
 					This text is truncated with an ellipsis when it exceeds the max-inline-size of 20rem.
 					Lorem ipsum dolor sit amet.
 				</div>
diff --git a/packages/@luke-ui/react/src/styles/utilities.test.ts b/packages/@luke-ui/react/src/styles/utilities.test.ts
new file mode 100644
index 00000000..a9eb67e0
--- /dev/null
+++ b/packages/@luke-ui/react/src/styles/utilities.test.ts
@@ -0,0 +1,81 @@
+import { expect, expectTypeOf, test } from 'vite-plus/test';
+import type { SprinklesProps } from './utilities.css.js';
+import { createSprinkles } from './utilities.css.js';
+
+const responsiveLayout = {
+	alignItems: { medium: 'center', xsmall: 'stretch' },
+	blockSize: { large: '50vh', xsmall: 'auto' },
+	display: { medium: 'grid', xsmall: 'flex' },
+	flex: '1 1 auto',
+	flexBasis: '12rem',
+	flexDirection: 'column',
+	flexGrow: '1',
+	flexShrink: '0',
+	flexWrap: 'wrap',
+	gap: { medium: '600', xsmall: '200' },
+	gridColumn: '1 / -1',
+	gridColumnEnd: 'span 2',
+	gridColumnStart: '2',
+	gridRow: 'auto / span 2',
+	inlineSize: { medium: '50%', xsmall: '100%' },
+	insetBlockStart: '0',
+	insetInline: 'var(--luke-space-400)',
+	justifyContent: 'space-between',
+	marginBlock: '0',
+	marginInline: 'auto',
+	maxInlineSize: '64rem',
+	minBlockSize: '10rem',
+	overflow: 'auto',
+	padding: { small: '400', xsmall: '300' },
+	placeSelf: 'stretch',
+	position: 'sticky',
+	rowGap: '1000',
+} as const satisfies SprinklesProps;
+
+test('types the responsive layout-only surface', () => {
+	expectTypeOf(responsiveLayout).toExtend<SprinklesProps>();
+	expect(createSprinkles.properties).toContain('display');
+	expect(createSprinkles.properties).toContain('gridColumn');
+	expect(createSprinkles.properties).not.toContain('color');
+	expect(createSprinkles.properties).not.toContain('backgroundColor');
+	expect(createSprinkles.properties).not.toContain('fontSize');
+});
+
+const removedColor = {
+	// @ts-expect-error Direct colour is not part of Sprinkles.
+	color: 'danger',
+} satisfies SprinklesProps;
+
+const removedBackgroundColor = {
+	// @ts-expect-error Direct background colour is not part of Sprinkles.
+	backgroundColor: 'neutral',
+} satisfies SprinklesProps;
+
+const removedTypography = {
+	// @ts-expect-error Typography is not part of Sprinkles.
+	fontSize: '300',
+} satisfies SprinklesProps;
+
+const removedPseudoState = {
+	// @ts-expect-error Pseudo-state colour props are not part of Sprinkles.
+	color: { hover: 'danger' },
+} satisfies SprinklesProps;
+
+const invalidSpaceValue = {
+	// @ts-expect-error Spacing accepts only semantic space steps.
+	padding: '1rem',
+} satisfies SprinklesProps;
+
+const invalidResponsiveSpaceValue = {
+	padding: {
+		// @ts-expect-error Responsive spacing accepts only semantic space steps.
+		small: '1rem',
+	},
+} satisfies SprinklesProps;
+
+void removedColor;
+void removedBackgroundColor;
+void removedTypography;
+void removedPseudoState;
+void invalidSpaceValue;
+void invalidResponsiveSpaceValue;
diff --git a/packages/@luke-ui/react/src/styles/vars.css.ts b/packages/@luke-ui/react/src/styles/vars.css.ts
deleted file mode 100644
index b8bd0179..00000000
--- a/packages/@luke-ui/react/src/styles/vars.css.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { createTheme, createThemeContract } from '@vanilla-extract/css';
-import { toCssValue } from '../tokens/converters.js';
-import { tokenKeys } from '../tokens/groups.js';
-import { tokens } from '../tokens/index.js';
-import { classSelector, lukeUiClassNames } from './class-names.js';
-import { globalStyleInLayer } from './layered-style.css.js';
-import { layers } from './layers.css.js';
-
-type TokenGroup = {
-	$type: string;
-	[key: string]: { $value: unknown } | string;
-};
-
-type TokenGroupKey<T extends TokenGroup> = Exclude<keyof T, '$type'>;
-
-function toContract<T extends TokenGroup>(group: T): Record<TokenGroupKey<T>, null> {
-	const contract = {} as Record<TokenGroupKey<T>, null>;
-	for (const key of tokenKeys(group)) {
-		contract[key] = null;
-	}
-	return contract;
-}
-
-function toStringValues<T extends TokenGroup>(group: T): Record<TokenGroupKey<T>, string> {
-	const values = {} as Record<TokenGroupKey<T>, string>;
-	for (const key of tokenKeys(group)) {
-		const entry = group[key];
-		if (entry && typeof entry === 'object' && '$value' in entry) {
-			values[key] = toCssValue(group.$type, entry.$value);
-		}
-	}
-	return values;
-}
-
-const contract = createThemeContract({
-	backgroundColor: toContract(tokens.backgroundColor),
-	borderColor: toContract(tokens.borderColor),
-	borderRadius: toContract(tokens.borderRadius),
-	borderWidth: toContract(tokens.borderWidth),
-	boxShadow: toContract(tokens.boxShadow),
-	controlSize: toContract(tokens.controlSize),
-	fontFamily: toContract(tokens.fontFamily),
-	fontSize: toContract(tokens.fontSize),
-	fontWeight: toContract(tokens.fontWeight),
-	foregroundColor: toContract(tokens.foregroundColor),
-	iconSize: toContract(tokens.iconSize),
-	lineHeight: toContract(tokens.lineHeight),
-	motionDuration: toContract(tokens.motionDuration),
-	motionEasing: toContract(tokens.motionEasing),
-	space: toContract(tokens.space),
-	themeColor: toContract(tokens.themeColor),
-});
-
-export const themeClass = createTheme(contract, {
-	'@layer': layers.theme,
-	backgroundColor: toStringValues(tokens.backgroundColor),
-	borderColor: toStringValues(tokens.borderColor),
-	borderRadius: toStringValues(tokens.borderRadius),
-	borderWidth: toStringValues(tokens.borderWidth),
-	boxShadow: toStringValues(tokens.boxShadow),
-	controlSize: toStringValues(tokens.controlSize),
-	fontFamily: toStringValues(tokens.fontFamily),
-	fontSize: toStringValues(tokens.fontSize),
-	fontWeight: toStringValues(tokens.fontWeight),
-	foregroundColor: toStringValues(tokens.foregroundColor),
-	iconSize: toStringValues(tokens.iconSize),
-	lineHeight: toStringValues(tokens.lineHeight),
-	motionDuration: toStringValues(tokens.motionDuration),
-	motionEasing: toStringValues(tokens.motionEasing),
-	space: toStringValues(tokens.space),
-	themeColor: toStringValues(tokens.themeColor),
-});
-
-export const vars = {
-	...contract,
-	backgroundColor: {
-		...contract.backgroundColor,
-		default: contract.backgroundColor.neutral,
-		disabled: contract.backgroundColor.neutralDisabled,
-		hover: contract.backgroundColor.neutralHover,
-		input: contract.backgroundColor.input,
-		inputDisabled: contract.backgroundColor.inputDisabled,
-		inverted: contract.backgroundColor.neutralInverted,
-		pressed: contract.backgroundColor.neutralPressed,
-		subtle: contract.backgroundColor.neutralSubtle,
-	},
-	border: {
-		critical: contract.borderColor.inputCritical,
-		default: contract.borderColor.neutralSubtle,
-		input: contract.borderColor.input,
-		strong: contract.borderColor.neutralBold,
-	},
-	boxShadow: contract.boxShadow,
-	color: contract.foregroundColor,
-	font: {
-		family: { body: contract.fontFamily.sans, mono: contract.fontFamily.mono },
-		lineHeight: contract.lineHeight,
-		size: contract.fontSize,
-		weight: contract.fontWeight,
-	},
-	foregroundColor: {
-		...contract.foregroundColor,
-		disabled: contract.foregroundColor.neutralDisabled,
-		inverse: contract.foregroundColor.neutralBoldInverted,
-		primary: contract.foregroundColor.neutralBold,
-		secondary: contract.foregroundColor.neutralSubtle,
-		status: {
-			caution: contract.foregroundColor.caution,
-			critical: contract.foregroundColor.critical,
-			informative: contract.foregroundColor.informative,
-			positive: contract.foregroundColor.positive,
-		},
-	},
-	iconSize: contract.iconSize,
-	motion: {
-		duration: contract.motionDuration,
-		easing: contract.motionEasing,
-	},
-	themeColor: contract.themeColor,
-};
-
-const themeRootSelector = classSelector(lukeUiClassNames.themeRoot);
-
-globalStyleInLayer('theme', themeRootSelector, {
-	accentColor: vars.themeColor.paletteThemePrimary500,
-	color: vars.foregroundColor.primary,
-	colorScheme: 'light',
-	fontFamily: vars.font.family.body,
-	fontSize: vars.font.size.standard,
-	lineHeight: vars.font.lineHeight.loose,
-});
diff --git a/packages/@luke-ui/react/src/text-field/index.tsx b/packages/@luke-ui/react/src/text-field/index.tsx
index c568bec8..4ff8b722 100644
--- a/packages/@luke-ui/react/src/text-field/index.tsx
+++ b/packages/@luke-ui/react/src/text-field/index.tsx
@@ -7,20 +7,15 @@ import { TextField as RacTextField } from 'react-aria-components/TextField';
 import type { FieldSlotProps } from '../field/compose-field.js';
 import { composeField } from '../field/compose-field.js';
 import { Field } from '../field/primitive/index.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { DocumentedInputProps } from '../types/documented-rac-props.js';
+import type { Prettify } from '../types/prettify.js';
 import type { TextInputSize } from './primitive/index.js';
 import { TextInput } from './primitive/index.js';
 
-/**
- * Props for the composed text field.
- *
- * @tier composed
- */
-export interface TextFieldProps
-	extends
-		Omit<RacTextFieldProps, 'children' | 'size' | keyof DocumentedInputProps>,
-		DocumentedInputProps,
-		FieldSlotProps {
+type _TextFieldOmit = DistributiveOmit<RacTextFieldProps, 'children' | keyof DocumentedInputProps>;
+
+interface _TextFieldProps extends _TextFieldOmit, DocumentedInputProps, FieldSlotProps {
 	/** Element shown after the input value. */
 	adornmentEnd?: ReactNode;
 	/** Element shown before the input value. */
@@ -33,6 +28,13 @@ export interface TextFieldProps
 	size?: TextInputSize;
 }
 
+/**
+ * Props for the composed text field.
+ *
+ * @tier composed
+ */
+export type TextFieldProps = Prettify<_TextFieldProps>;
+
 /** Composes `TextInput` with label, description, and error slots. */
 export function TextField(props: TextFieldProps): JSX.Element {
 	const [fieldSlotProps, restProps] = composeField(props);
diff --git a/packages/@luke-ui/react/src/text-field/primitive/index.tsx b/packages/@luke-ui/react/src/text-field/primitive/index.tsx
index 02f27e77..c8781904 100644
--- a/packages/@luke-ui/react/src/text-field/primitive/index.tsx
+++ b/packages/@luke-ui/react/src/text-field/primitive/index.tsx
@@ -5,6 +5,8 @@ import type { InputProps as RacInputProps } from 'react-aria-components/Input';
 import { Input as RacInput } from 'react-aria-components/Input';
 import { composeRenderProps } from 'react-aria-components/composeRenderProps';
 import * as styles from '../../recipes/text-input.css.js';
+import type { DistributiveOmit } from '../../types/distributive-omit.js';
+import type { Prettify } from '../../types/prettify.js';
 import { cx } from '../../utils/index.js';
 
 interface TextInputVariantProps extends NonNullable<styles.TextInputVariants> {}
@@ -20,13 +22,8 @@ interface TextInputStyleProps {
 /** Allowed `size` values for `TextInput`. */
 export type TextInputSize = NonNullable<TextInputVariantProps['size']>;
 
-/**
- * Props for the primitive text input.
- *
- * @tier primitive
- */
-export interface TextInputProps
-	extends Omit<RacInputProps, 'className' | keyof TextInputStyleProps>, TextInputStyleProps {
+type _TextInputOmit = DistributiveOmit<RacInputProps, 'className' | keyof TextInputStyleProps>;
+interface _TextInputProps extends _TextInputOmit, TextInputStyleProps {
 	/** Element shown at the end of the control. */
 	adornmentEnd?: ReactNode;
 	/** Element shown at the start of the control. */
@@ -37,6 +34,13 @@ export interface TextInputProps
 	inputClassName?: RacInputProps['className'];
 }
 
+/**
+ * Props for the primitive text input.
+ *
+ * @tier primitive
+ */
+export type TextInputProps = Prettify<_TextInputProps>;
+
 /** Styled text input with optional start/end adornments. */
 export function TextInput(props: TextInputProps): JSX.Element {
 	const {
diff --git a/packages/@luke-ui/react/src/text/index.tsx b/packages/@luke-ui/react/src/text/index.tsx
index 5f489204..8e765bcb 100644
--- a/packages/@luke-ui/react/src/text/index.tsx
+++ b/packages/@luke-ui/react/src/text/index.tsx
@@ -1,5 +1,7 @@
 import { Text as RacText } from 'react-aria-components/Text';
 import * as styles from '../recipes/text.css.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
+import type { Prettify } from '../types/prettify.js';
 import { cx } from '../utils/index.js';
 
 interface TextVariantProps extends NonNullable<styles.TextVariants> {}
@@ -64,13 +66,15 @@ interface TextStyleProps {
 	textWrap?: TextVariantProps['textWrap'];
 }
 
+type _TextOmit = DistributiveOmit<React.ComponentProps<typeof RacText>, 'color'>;
+interface _TextProps extends _TextOmit, TextStyleProps {}
+
 /**
  * Props for the primitive text component.
  *
  * @tier atom
  */
-export type TextProps = Omit<React.ComponentProps<typeof RacText>, keyof TextStyleProps> &
-	TextStyleProps;
+export type TextProps = Prettify<_TextProps>;
 
 /** Styled text with a coordinated type scale and semantic colour controls. */
 export function Text(props: TextProps) {
diff --git a/packages/@luke-ui/react/src/text/text.stories.tsx b/packages/@luke-ui/react/src/text/text.stories.tsx
index 80562be7..329340a7 100644
--- a/packages/@luke-ui/react/src/text/text.stories.tsx
+++ b/packages/@luke-ui/react/src/text/text.stories.tsx
@@ -5,7 +5,8 @@ import type { CSSProperties } from 'react';
 import { expect } from 'storybook/test';
 import preview from '../../.storybook/preview.js';
 import { createSprinkles } from '../styles/index.js';
-import { vars } from '../theme.css.js';
+import { vars } from '../theme/index.js';
+import type { DistributiveOmit } from '../types/distributive-omit.js';
 
 const meta = preview.meta({
 	component: Text,
@@ -14,7 +15,7 @@ const meta = preview.meta({
 });
 
 const panelStyle = {
-	borderColor: vars.border.default,
+	borderColor: vars.color.border.decorative,
 	borderStyle: 'dashed',
 	borderWidth: 1,
 	maxInlineSize: '40rem',
@@ -33,10 +34,12 @@ const loremIpsum =
 const importantIdentifier = 'budget-allocation-review-cycle-2026-06-05-eu-west-1-BA-109284';
 const importantIdentifierSuffix = '-BA-109284';
 
-type MiddleTruncatedIdentifierProps = Omit<TextProps, 'children'> & {
+type MiddleTruncatedIdentifierOmit = DistributiveOmit<TextProps, 'children'>;
+
+interface MiddleTruncatedIdentifierProps extends MiddleTruncatedIdentifierOmit {
 	identifier: string;
 	suffix: string;
-};
+}
 
 function MiddleTruncatedIdentifier(props: MiddleTruncatedIdentifierProps) {
 	const { identifier, suffix, ...textProps } = props;
@@ -52,7 +55,6 @@ function MiddleTruncatedIdentifier(props: MiddleTruncatedIdentifierProps) {
 		flexGrow: '1',
 		flexShrink: '1',
 		minInlineSize: '0',
-		textOverflow: 'clip',
 	});
 	const fixed = createSprinkles({ flexBasis: 'auto', flexGrow: '0', flexShrink: '0' });
 
@@ -233,7 +235,7 @@ export const Truncate = meta.story({
 		const container = createSprinkles({
 			display: 'flex',
 			flexDirection: 'column',
-			gap: 'medium',
+			gap: '400',
 			inlineSize: '100%',
 			maxInlineSize: '20rem',
 			minInlineSize: '0',
@@ -263,7 +265,7 @@ export const MiddleTruncation = meta.story({
 		const container = createSprinkles({
 			display: 'flex',
 			flexDirection: 'column',
-			gap: 'medium',
+			gap: '400',
 			inlineSize: '100%',
 			maxInlineSize: '20rem',
 			minInlineSize: '0',
@@ -299,7 +301,7 @@ export const LineClamp = meta.story({
 		const container = createSprinkles({
 			display: 'flex',
 			flexDirection: 'column',
-			gap: 'medium',
+			gap: '400',
 			inlineSize: '100%',
 			maxInlineSize: '20rem',
 			minInlineSize: '0',
diff --git a/packages/@luke-ui/react/src/theme.css.ts b/packages/@luke-ui/react/src/theme.css.ts
deleted file mode 100644
index 6682f75c..00000000
--- a/packages/@luke-ui/react/src/theme.css.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import './styles/index.css.js';
-
-export { themeClass, vars } from './styles/vars.css.js';
diff --git a/packages/@luke-ui/react/src/theme/build-theme.test.ts b/packages/@luke-ui/react/src/theme/build-theme.test.ts
index d737c6b2..c2ce98c8 100644
--- a/packages/@luke-ui/react/src/theme/build-theme.test.ts
+++ b/packages/@luke-ui/react/src/theme/build-theme.test.ts
@@ -13,8 +13,13 @@ import {
 import { elmoFoundation, machinedEdgeFoundation } from './foundations.js';
 
 const pairs = flattenThemeContract();
-const isModePath = (path: string) =>
-	path.startsWith('actionControlFinish.') || path.startsWith('color.') || path.startsWith('depth.');
+const isModePath = (path: string) => {
+	return (
+		path.startsWith('actionControlFinish.') ||
+		path.startsWith('color.') ||
+		path.startsWith('depth.')
+	);
+};
 const modeVarNames = pairs.filter(([path]) => isModePath(path)).map(([, varName]) => varName);
 const identityVarNames = pairs.filter(([path]) => !isModePath(path)).map(([, varName]) => varName);
 
@@ -71,14 +76,13 @@ describe('buildTheme output', () => {
 	});
 
 	it('declares every identity variable exactly once in the identity block', () => {
-		const counts = identityVarNames.map((varName) => [
-			varName,
-			countOccurrences(blocks.identity, `${varName}: `),
-		]);
+		const counts = identityVarNames.map((varName) => {
+			return [varName, countOccurrences(blocks.identity, `${varName}: `)];
+		});
 		expect(counts).toEqual(identityVarNames.map((varName) => [varName, 1]));
-		const modeCounts = modeVarNames.map((varName) =>
-			countOccurrences(blocks.identity, `${varName}: `),
-		);
+		const modeCounts = modeVarNames.map((varName) => {
+			return countOccurrences(blocks.identity, `${varName}: `);
+		});
 		expect(modeCounts).toEqual(modeVarNames.map(() => 0));
 	});
 
@@ -95,9 +99,9 @@ describe('buildTheme output', () => {
 				countOccurrences(block, `${varName}: `),
 			]);
 			expect(counts).toEqual(modeVarNames.map((varName) => [varName, 1]));
-			const identityCounts = identityVarNames.map((varName) =>
-				countOccurrences(block, `${varName}: `),
-			);
+			const identityCounts = identityVarNames.map((varName) => {
+				return countOccurrences(block, `${varName}: `);
+			});
 			expect(identityCounts).toEqual(identityVarNames.map(() => 0));
 		}
 	});
@@ -325,11 +329,12 @@ describe('buildTheme contrast failures', () => {
 			},
 			name: 'bad-focus',
 		});
-		const failure = error.failures.find(
-			(candidate) =>
+		const failure = error.failures.find((candidate) => {
+			return (
 				candidate.foreground === 'color.border.focus' &&
-				candidate.background === 'color.surface.canvas',
-		);
+				candidate.background === 'color.surface.canvas'
+			);
+		});
 		expect(failure).toBeDefined();
 		expect(failure?.mode).toBe('light');
 		expect(failure?.required).toBe(3);
@@ -348,12 +353,13 @@ describe('buildTheme contrast failures', () => {
 			},
 			name: 'bad-dark-neutral',
 		});
-		const failure = error.failures.find(
-			(candidate) =>
+		const failure = error.failures.find((candidate) => {
+			return (
 				candidate.mode === 'dark' &&
 				candidate.foreground === 'color.text.primary' &&
-				candidate.background.startsWith('color.surface.'),
-		);
+				candidate.background.startsWith('color.surface.')
+			);
+		});
 		expect(failure).toBeDefined();
 		expect(failure?.required).toBe(4.5);
 		expect(error.message).toContain('dark: color.text.primary on color.surface.canvas');
@@ -453,9 +459,9 @@ describe('bundled themes meet WCAG 2.2 AA', () => {
 		it(`${foundation.name} generates the least-contrasting passing control borders`, () => {
 			const blocks = splitBlocks(buildTheme(foundation));
 			for (const block of [blocks.baseLight, blocks.mediaDark]) {
-				const surfaces = ['canvas', 'resting', 'recessed'].map((surface) =>
-					parseColor(extractValue(block, `--luke-color-surface-${surface}`)),
-				);
+				const surfaces = ['canvas', 'resting', 'recessed'].map((surface) => {
+					return parseColor(extractValue(block, `--luke-color-surface-${surface}`));
+				});
 				const borderVarNames = [
 					'--luke-color-border-control',
 					...['accent', 'info', 'success', 'warning', 'danger'].map(
diff --git a/packages/@luke-ui/react/src/theme/build-theme.ts b/packages/@luke-ui/react/src/theme/build-theme.ts
index 7f39974a..9e34b623 100644
--- a/packages/@luke-ui/react/src/theme/build-theme.ts
+++ b/packages/@luke-ui/react/src/theme/build-theme.ts
@@ -72,11 +72,12 @@ export class ThemeContrastError extends Error {
 		super(
 			[
 				'Theme foundation fails WCAG 2.2 AA contrast:',
-				...failures.map(
-					(failure) =>
+				...failures.map((failure) => {
+					return (
 						`${failure.mode}: ${failure.foreground} on ${failure.background} — ` +
-						`${failure.ratio.toFixed(2)}:1 < ${failure.required}:1`,
-				),
+						`${failure.ratio.toFixed(2)}:1 < ${failure.required}:1`
+					);
+				}),
 			].join('\n'),
 		);
 		this.failures = failures;
@@ -313,8 +314,9 @@ function buildModeColors(
 
 	// Disabled roles are exempt from contrast checks but must remain perceptibly disabled.
 	const disabledChroma = Math.min(neutral.c, 0.01);
-	const disabledAt = (delta: number) =>
-		gamutMapOklch({ c: disabledChroma, h: neutral.h, l: clampUnit(canvas.l + delta) });
+	const disabledAt = (delta: number) => {
+		return gamutMapOklch({ c: disabledChroma, h: neutral.h, l: clampUnit(canvas.l + delta) });
+	};
 	colors['color.surfaceDisabled'] = disabledAt(isLight ? -0.06 : 0.05);
 	colors['color.textDisabled'] = disabledAt(isLight ? -0.32 : 0.33);
 	colors['color.borderDisabled'] = disabledAt(isLight ? -0.12 : 0.14);
@@ -340,8 +342,12 @@ function buildModeColors(
 		h: neutral.h,
 		l: isLight ? 0.32 : 0.85,
 	});
-	const neutralSolidAt = (delta: number) =>
-		gamutMapOklch({ ...neutralSolid, l: clampUnit(neutralSolid.l + (isLight ? -delta : delta)) });
+	const neutralSolidAt = (delta: number) => {
+		return gamutMapOklch({
+			...neutralSolid,
+			l: clampUnit(neutralSolid.l + (isLight ? -delta : delta)),
+		});
+	};
 	const neutralSolidHover = neutralSolidAt(0.05);
 	const neutralSolidPressed = neutralSolidAt(0.09);
 	const neutralSubtle = buildSubtleTrio(mode, canvas, neutral);
@@ -632,10 +638,13 @@ function assembleStylesheet(
 ): string {
 	const selector = `.${themeClassName(foundation.name)}`;
 	const pairs = flattenThemeContract();
-	const isModePath = (path: string) =>
-		path.startsWith('actionControlFinish.') ||
-		path.startsWith('color.') ||
-		path.startsWith('depth.');
+	const isModePath = (path: string) => {
+		return (
+			path.startsWith('actionControlFinish.') ||
+			path.startsWith('color.') ||
+			path.startsWith('depth.')
+		);
+	};
 	const identityPairs = pairs.filter(([path]) => !isModePath(path));
 	const modePairs = pairs.filter(([path]) => isModePath(path));
 
@@ -647,12 +656,13 @@ function assembleStylesheet(
 	// the system preference. The explicit attribute rules are specificity (0,2,0), so they beat the
 	// (0,1,0) media-query rule whether the attribute sits on the theme root, inside its subtree, or
 	// on an ancestor. Every scope sets native color-scheme, and the output is unlayered on purpose.
-	const attributeSelectors = (attributeMode: ColorMode) =>
-		[
+	const attributeSelectors = (attributeMode: ColorMode) => {
+		return [
 			`${selector}[data-color-mode='${attributeMode}'],`,
 			`${selector} [data-color-mode='${attributeMode}'],`,
 			`[data-color-mode='${attributeMode}'] ${selector} {`,
 		].join('\n');
+	};
 
 	return [
 		'/* Generated by buildTheme from @luke-ui/react. Do not edit. */',
diff --git a/packages/@luke-ui/react/src/theme/index.tsx b/packages/@luke-ui/react/src/theme/index.tsx
index 52cde014..a1f8095b 100644
--- a/packages/@luke-ui/react/src/theme/index.tsx
+++ b/packages/@luke-ui/react/src/theme/index.tsx
@@ -1,16 +1,8 @@
 import { lukeUiClassNames } from '../styles/class-names.js';
-import { themeClass } from '../theme.css.js';
 import { cx } from '../utils/index.js';
 
-/** The vanilla-extract CSS class that applies the design-token theme to its subtree. */
-export { themeClass } from '../theme.css.js';
-
-/** Convenience class name combining the theme, theme-root, and CSS-reset root classes. Apply to your app's root element. */
-export const themeRootClassName = cx(
-	themeClass,
-	lukeUiClassNames.themeRoot,
-	lukeUiClassNames.resetRoot,
-);
+/** Convenience class name combining the theme-root and CSS-reset classes. */
+export const themeRootClassName = cx(lukeUiClassNames.themeRoot, lukeUiClassNames.resetRoot);
 
 /**
  * Typed access to the semantic theme custom properties. Each path resolves to a stable global
diff --git a/packages/@luke-ui/react/src/theme/tokens.stories.tsx b/packages/@luke-ui/react/src/theme/tokens.stories.tsx
new file mode 100644
index 00000000..392d0bbe
--- /dev/null
+++ b/packages/@luke-ui/react/src/theme/tokens.stories.tsx
@@ -0,0 +1,970 @@
+import { vars } from '@luke-ui/react/theme';
+import type { CSSProperties, ReactNode } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { expect } from 'storybook/test';
+import preview from '../../.storybook/preview.js';
+
+interface ColorSample {
+	label: string;
+	value: string;
+}
+
+interface FontStep {
+	baselineTrim: string;
+	capHeightTrim: string;
+	fontSize: string;
+	letterSpacing: string;
+	lineHeight: string;
+}
+
+interface IntentSample {
+	key: string;
+	label: string;
+	roles: Array<IntentRoleSample>;
+	surfaces: Array<ColorSample>;
+}
+
+interface IntentRoleSample extends ColorSample {
+	background?: string;
+	key: string;
+	preview: 'border' | 'onSolid' | 'text';
+}
+
+interface IntentSurfaceVars {
+	solid: string;
+	solidHover: string;
+	solidPressed: string;
+	subtle: string;
+	subtleHover: string;
+	subtlePressed: string;
+}
+
+interface MotionSample {
+	accessibleLabel: string;
+	duration: string;
+	durationKey: string;
+	easing: string;
+	easingKey: string;
+	label: string;
+}
+
+interface TokenDatum {
+	path: string;
+	value: string;
+}
+
+interface TokenRow {
+	key: string;
+	preview: ReactNode;
+	values: Array<TokenDatum>;
+}
+
+interface TokenSectionProps {
+	children: ReactNode;
+	title: string;
+}
+
+interface TokenTableProps {
+	caption: string;
+	rows: Array<TokenRow>;
+}
+
+interface ValueSample {
+	label: string;
+	value: string;
+}
+
+const surfaceSamples: Array<ColorSample> = [
+	{ label: 'Canvas', value: vars.color.surface.canvas },
+	{ label: 'Recessed', value: vars.color.surface.recessed },
+	{ label: 'Resting', value: vars.color.surface.resting },
+	{ label: 'Floating', value: vars.color.surface.floating },
+	{ label: 'Overlay', value: vars.color.surface.overlay },
+	{ label: 'Disabled', value: vars.color.surfaceDisabled },
+	{ label: 'Loading skeleton', value: vars.color.loadingSkeleton },
+];
+
+const textSamples: Array<ColorSample> = [
+	{ label: 'Primary', value: vars.color.text.primary },
+	{ label: 'Secondary', value: vars.color.text.secondary },
+	{ label: 'Disabled', value: vars.color.textDisabled },
+];
+
+const borderSamples: Array<ColorSample> = [
+	{ label: 'Decorative', value: vars.color.border.decorative },
+	{ label: 'Control', value: vars.color.border.control },
+	{ label: 'Focus', value: vars.color.border.focus },
+	{ label: 'Disabled', value: vars.color.borderDisabled },
+];
+
+const intentSamples: Array<IntentSample> = [
+	{
+		key: 'neutral',
+		label: 'Neutral',
+		roles: [
+			{
+				background: vars.color.intent.neutral.surface.solid,
+				key: 'onSolid',
+				label: 'On solid',
+				preview: 'onSolid',
+				value: vars.color.intent.neutral.onSolid,
+			},
+		],
+		surfaces: intentSurfaceSamples(vars.color.intent.neutral.surface),
+	},
+	{
+		key: 'accent',
+		label: 'Accent',
+		roles: [
+			{ key: 'border', label: 'Border', preview: 'border', value: vars.color.intent.accent.border },
+			{ key: 'text', label: 'Text', preview: 'text', value: vars.color.intent.accent.text },
+			{
+				key: 'textHover',
+				label: 'Text hover',
+				preview: 'text',
+				value: vars.color.intent.accent.textHover,
+			},
+			{
+				background: vars.color.intent.accent.surface.solid,
+				key: 'onSolid',
+				label: 'On solid',
+				preview: 'onSolid',
+				value: vars.color.intent.accent.onSolid,
+			},
+		],
+		surfaces: intentSurfaceSamples(vars.color.intent.accent.surface),
+	},
+	{
+		key: 'info',
+		label: 'Info',
+		roles: intentRoles(
+			vars.color.intent.info.border,
+			vars.color.intent.info.text,
+			vars.color.intent.info.onSolid,
+			vars.color.intent.info.surface.solid,
+		),
+		surfaces: intentSurfaceSamples(vars.color.intent.info.surface),
+	},
+	{
+		key: 'success',
+		label: 'Success',
+		roles: intentRoles(
+			vars.color.intent.success.border,
+			vars.color.intent.success.text,
+			vars.color.intent.success.onSolid,
+			vars.color.intent.success.surface.solid,
+		),
+		surfaces: intentSurfaceSamples(vars.color.intent.success.surface),
+	},
+	{
+		key: 'warning',
+		label: 'Warning',
+		roles: intentRoles(
+			vars.color.intent.warning.border,
+			vars.color.intent.warning.text,
+			vars.color.intent.warning.onSolid,
+			vars.color.intent.warning.surface.solid,
+		),
+		surfaces: intentSurfaceSamples(vars.color.intent.warning.surface),
+	},
+	{
+		key: 'danger',
+		label: 'Danger',
+		roles: intentRoles(
+			vars.color.intent.danger.border,
+			vars.color.intent.danger.text,
+			vars.color.intent.danger.onSolid,
+			vars.color.intent.danger.surface.solid,
+		),
+		surfaces: intentSurfaceSamples(vars.color.intent.danger.surface),
+	},
+];
+
+const depthSamples: Array<ValueSample> = [
+	{ label: 'Recessed', value: vars.depth.recessed },
+	{ label: 'Resting', value: vars.depth.resting },
+	{ label: 'Raised', value: vars.depth.raised },
+	{ label: 'Floating', value: vars.depth.floating },
+	{ label: 'Overlay', value: vars.depth.overlay },
+];
+
+const finishSamples: Array<ValueSample> = [
+	{ label: 'Recessed', value: vars.actionControlFinish.recessed },
+	{ label: 'Resting', value: vars.actionControlFinish.resting },
+	{ label: 'Raised', value: vars.actionControlFinish.raised },
+];
+
+const fontSamples = [
+	{ label: '100', step: vars.font[100] },
+	{ label: '200', step: vars.font[200] },
+	{ label: '300', step: vars.font[300] },
+	{ label: '400', step: vars.font[400] },
+	{ label: '500', step: vars.font[500] },
+	{ label: '600', step: vars.font[600] },
+	{ label: '700', step: vars.font[700] },
+	{ label: '800', step: vars.font[800] },
+	{ label: '900', step: vars.font[900] },
+] as const satisfies ReadonlyArray<{ label: string; step: FontStep }>;
+
+const fontWeightSamples: Array<ValueSample> = [
+	{ label: 'Body', value: vars.font.weight.body },
+	{ label: 'Label', value: vars.font.weight.label },
+	{ label: 'Heading', value: vars.font.weight.heading },
+	{ label: 'Emphasis', value: vars.font.weight.emphasis },
+];
+
+const spaceSamples: Array<ValueSample> = [
+	{ label: '100', value: vars.space[100] },
+	{ label: '200', value: vars.space[200] },
+	{ label: '300', value: vars.space[300] },
+	{ label: '400', value: vars.space[400] },
+	{ label: '600', value: vars.space[600] },
+	{ label: '800', value: vars.space[800] },
+	{ label: '1000', value: vars.space[1000] },
+	{ label: '1200', value: vars.space[1200] },
+	{ label: '1600', value: vars.space[1600] },
+];
+
+const radiusSamples: Array<ValueSample> = [
+	{ label: 'Detail', value: vars.radius.detail },
+	{ label: 'Control', value: vars.radius.control },
+	{ label: 'Surface', value: vars.radius.surface },
+	{ label: 'Overlay', value: vars.radius.overlay },
+	{ label: 'Full', value: vars.radius.full },
+];
+
+const sizeSamples = [
+	{ group: 'controlSize', label: 'Control small', token: 'small', value: vars.controlSize.small },
+	{
+		group: 'controlSize',
+		label: 'Control medium',
+		token: 'medium',
+		value: vars.controlSize.medium,
+	},
+	{ group: 'iconSize', label: 'Icon xsmall', token: 'xsmall', value: vars.iconSize.xsmall },
+	{ group: 'iconSize', label: 'Icon small', token: 'small', value: vars.iconSize.small },
+	{ group: 'iconSize', label: 'Icon medium', token: 'medium', value: vars.iconSize.medium },
+	{ group: 'iconSize', label: 'Icon large', token: 'large', value: vars.iconSize.large },
+] as const;
+
+const motionSamples: Array<MotionSample> = [
+	{
+		accessibleLabel: 'Fast standard motion sample',
+		duration: vars.motion.duration.fast,
+		durationKey: 'fast',
+		easing: vars.motion.easing.standard,
+		easingKey: 'standard',
+		label: 'Fast / standard',
+	},
+	{
+		accessibleLabel: 'Medium enter motion sample',
+		duration: vars.motion.duration.medium,
+		durationKey: 'medium',
+		easing: vars.motion.easing.enter,
+		easingKey: 'enter',
+		label: 'Medium / enter',
+	},
+	{
+		accessibleLabel: 'Slow exit motion sample',
+		duration: vars.motion.duration.slow,
+		durationKey: 'slow',
+		easing: vars.motion.easing.exit,
+		easingKey: 'exit',
+		label: 'Slow / exit',
+	},
+	{
+		accessibleLabel: 'Ambient standard motion sample',
+		duration: vars.motion.duration.ambient,
+		durationKey: 'ambient',
+		easing: vars.motion.easing.standard,
+		easingKey: 'standard',
+		label: 'Ambient / standard',
+	},
+];
+
+const meta = preview.meta({
+	component: ThemeTokens,
+	tags: ['theme'],
+	title: 'Theme/Tokens',
+});
+
+const pageStyle = {
+	display: 'grid',
+	gap: vars.space[1000],
+	inlineSize: '100%',
+	marginInline: 'auto',
+	maxInlineSize: '80rem',
+} as const satisfies CSSProperties;
+
+const sectionStyle = {
+	display: 'grid',
+	gap: vars.space[300],
+} as const satisfies CSSProperties;
+
+const tableWrapStyle = {
+	borderColor: vars.color.border.decorative,
+	borderRadius: vars.radius.surface,
+	borderStyle: 'solid',
+	borderWidth: 1,
+	inlineSize: '100%',
+	overflow: 'auto',
+} as const satisfies CSSProperties;
+
+const tableStyle = {
+	borderCollapse: 'collapse',
+	fontSize: vars.font[200].fontSize,
+	inlineSize: '100%',
+	minInlineSize: '54rem',
+	tableLayout: 'fixed',
+} as const satisfies CSSProperties;
+
+const headerCellStyle = {
+	backgroundColor: vars.color.surface.recessed,
+	borderBlockEndColor: vars.color.border.decorative,
+	borderBlockEndStyle: 'solid',
+	borderBlockEndWidth: 1,
+	fontWeight: vars.font.weight.label,
+	paddingBlock: vars.space[300],
+	paddingInline: vars.space[400],
+	textAlign: 'start',
+} as const satisfies CSSProperties;
+
+const cellStyle = {
+	borderBlockEndColor: vars.color.border.decorative,
+	borderBlockEndStyle: 'solid',
+	borderBlockEndWidth: 1,
+	overflowWrap: 'anywhere',
+	paddingBlock: vars.space[300],
+	paddingInline: vars.space[400],
+	verticalAlign: 'middle',
+} as const satisfies CSSProperties;
+
+const codeStyle = {
+	fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+	fontSize: vars.font[100].fontSize,
+	lineHeight: vars.font[100].lineHeight,
+} as const satisfies CSSProperties;
+
+const valueListStyle = {
+	display: 'grid',
+	gap: vars.space[100],
+} as const satisfies CSSProperties;
+
+const previewFrameStyle = {
+	alignItems: 'center',
+	blockSize: '2.5rem',
+	display: 'flex',
+	inlineSize: '7rem',
+	justifyContent: 'center',
+} as const satisfies CSSProperties;
+
+const swatchStyle = {
+	blockSize: '2rem',
+	borderColor: vars.color.border.decorative,
+	borderRadius: vars.radius.detail,
+	borderStyle: 'solid',
+	borderWidth: 1,
+	display: 'inline-block',
+	inlineSize: '6rem',
+} as const satisfies CSSProperties;
+
+/**
+ * Compact visual reference for every public semantic variable. Change the theme and colour mode in
+ * the Storybook toolbar to compare both the previews and their resolved CSS values.
+ */
+export const Reference = meta.story({
+	play: async ({ canvas, canvasElement }) => {
+		const accentSubtle = canvas.getByRole('img', { name: 'Accent subtle colour sample' });
+		const accentSubtleHover = canvas.getByRole('img', {
+			name: 'Accent subtle hover colour sample',
+		});
+		const accentSubtlePressed = canvas.getByRole('img', {
+			name: 'Accent subtle pressed colour sample',
+		});
+		await expect(getComputedStyle(accentSubtle).backgroundColor).not.toBe(
+			getComputedStyle(accentSubtleHover).backgroundColor,
+		);
+		await expect(getComputedStyle(accentSubtleHover).backgroundColor).not.toBe(
+			getComputedStyle(accentSubtlePressed).backgroundColor,
+		);
+
+		const primaryText = canvas.getByRole('img', { name: 'Primary text colour sample' });
+		const disabledText = canvas.getByRole('img', { name: 'Disabled text colour sample' });
+		await expect(getComputedStyle(primaryText).backgroundColor).not.toBe(
+			getComputedStyle(disabledText).backgroundColor,
+		);
+
+		const controlBorder = canvas.getByRole('img', { name: 'Control border colour sample' });
+		const focusBorder = canvas.getByRole('img', { name: 'Focus border colour sample' });
+		await expect(getComputedStyle(controlBorder).borderColor).not.toBe(
+			getComputedStyle(focusBorder).borderColor,
+		);
+
+		const depthOverlay = canvas.getByRole('img', { name: 'Overlay depth sample' });
+		await expect(getComputedStyle(depthOverlay).boxShadow).not.toBe('none');
+
+		const font100 = canvas.getByRole('img', { name: 'Font 100 size sample' });
+		const font900 = canvas.getByRole('img', { name: 'Font 900 size sample' });
+		await expect(Number.parseFloat(getComputedStyle(font900).fontSize)).toBeGreaterThan(
+			Number.parseFloat(getComputedStyle(font100).fontSize),
+		);
+		const bodyWeight = canvas.getByText('Body weight');
+		const emphasisWeight = canvas.getByText('Emphasis weight');
+		await expect(Number(getComputedStyle(emphasisWeight).fontWeight)).toBeGreaterThan(
+			Number(getComputedStyle(bodyWeight).fontWeight),
+		);
+
+		const space100 = canvas.getByRole('img', { name: 'Space 100 sample' });
+		const space1600 = canvas.getByRole('img', { name: 'Space 1600 sample' });
+		await expect(space1600.getBoundingClientRect().width).toBeGreaterThan(
+			space100.getBoundingClientRect().width,
+		);
+
+		const mediumControl = canvas.getByRole('img', { name: 'Control medium size sample' });
+		await expect(getComputedStyle(mediumControl).blockSize).toBe('40px');
+
+		const mediumMotion = canvas.getByRole('img', { name: 'Medium enter motion sample' });
+		await expect(getComputedStyle(mediumMotion).animationDuration).toBe('0.2s');
+
+		const resolvedCanvas = canvasElement.querySelector('[data-token-path="color.surface.canvas"]');
+		await expect(resolvedCanvas).not.toBeNull();
+		await expect(resolvedCanvas?.textContent).not.toContain('var(');
+	},
+});
+
+function ThemeTokens() {
+	return (
+		<main style={pageStyle}>
+			<style>{`@keyframes luke-token-motion { from { transform: translateX(0); } to { transform: translateX(4.5rem); } } @media (prefers-reduced-motion: reduce) { [data-token-motion] { animation: none !important; } }`}</style>
+			<header>
+				<h1 style={{ marginBlock: 0 }}>Theme tokens</h1>
+				<p style={{ color: vars.color.text.secondary, marginBlockEnd: 0 }}>
+					Public semantic variables resolved from the active theme and colour mode.
+				</p>
+			</header>
+
+			<TokenSection title="Surfaces">
+				<TokenTable
+					caption="Surface colour tokens"
+					rows={surfaceSamples.map((sample) => {
+						const path = surfacePath(sample.label);
+						return tokenRow(
+							path,
+							<ColorPreview label={`${sample.label} surface colour sample`} value={sample.value} />,
+							sample.value,
+						);
+					})}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Text colours">
+				<TokenTable
+					caption="Text colour tokens"
+					rows={textSamples.map((sample) => {
+						const path =
+							sample.label === 'Disabled'
+								? 'color.textDisabled'
+								: `color.text.${toKey(sample.label)}`;
+						return tokenRow(
+							path,
+							<TextPreview label={`${sample.label} text colour sample`} value={sample.value} />,
+							sample.value,
+						);
+					})}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Border colours">
+				<TokenTable
+					caption="Border colour tokens"
+					rows={borderSamples.map((sample) => {
+						const path =
+							sample.label === 'Disabled'
+								? 'color.borderDisabled'
+								: `color.border.${toKey(sample.label)}`;
+						return tokenRow(
+							path,
+							<BorderPreview label={`${sample.label} border colour sample`} value={sample.value} />,
+							sample.value,
+						);
+					})}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Intent colours">
+				{intentSamples.map((intent) => (
+					<section key={intent.key} style={sectionStyle}>
+						<h3 style={{ margin: 0 }}>{intent.label}</h3>
+						<TokenTable
+							caption={`${intent.label} intent colour tokens`}
+							rows={[
+								...intent.surfaces.map((sample) => {
+									const surfaceKey = toKey(sample.label);
+									const path = `color.intent.${intent.key}.surface.${surfaceKey}`;
+									return tokenRow(
+										path,
+										<ColorPreview
+											label={`${intent.label} ${sample.label.toLowerCase()} colour sample`}
+											value={sample.value}
+										/>,
+										sample.value,
+									);
+								}),
+								...intent.roles.map((sample) => {
+									const path = `color.intent.${intent.key}.${sample.key}`;
+									return tokenRow(
+										path,
+										<IntentRolePreview intentLabel={intent.label} sample={sample} />,
+										sample.value,
+									);
+								}),
+							]}
+						/>
+					</section>
+				))}
+			</TokenSection>
+
+			<TokenSection title="Depth and material">
+				<TokenTable
+					caption="Depth and control finish tokens"
+					rows={[
+						...depthSamples.map((sample) => {
+							const path = `depth.${toKey(sample.label)}`;
+							return tokenRow(
+								path,
+								<DepthPreview label={`${sample.label} depth sample`} value={sample.value} />,
+								sample.value,
+							);
+						}),
+						...finishSamples.map((sample) => {
+							const path = `actionControlFinish.${toKey(sample.label)}`;
+							return tokenRow(
+								path,
+								<FinishPreview
+									label={`${sample.label} control finish sample`}
+									value={sample.value}
+								/>,
+								sample.value,
+							);
+						}),
+					]}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Typography">
+				<TokenTable
+					caption="Font family and weight tokens"
+					rows={[
+						tokenRow(
+							'font.family',
+							<span style={{ fontFamily: vars.font.family }}>Sphinx of black quartz</span>,
+							vars.font.family,
+						),
+						...fontWeightSamples.map((sample) =>
+							tokenRow(
+								`font.weight.${toKey(sample.label)}`,
+								<span style={{ fontWeight: sample.value }}>{`${sample.label} weight`}</span>,
+								sample.value,
+							),
+						),
+					]}
+				/>
+				<TokenTable
+					caption="Typography scale tokens"
+					rows={fontSamples.map(({ label, step }) => ({
+						key: `font.${label}`,
+						preview: (
+							<span
+								aria-label={`Font ${label} size sample`}
+								role="img"
+								style={{
+									display: 'block',
+									fontFamily: vars.font.family,
+									fontSize: step.fontSize,
+									letterSpacing: step.letterSpacing,
+									lineHeight: step.lineHeight,
+									overflow: 'hidden',
+									whiteSpace: 'nowrap',
+								}}
+							>
+								Aa
+							</span>
+						),
+						values: fontStepData(label, step),
+					}))}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Spacing">
+				<TokenTable
+					caption="Space tokens"
+					rows={spaceSamples.map((sample) =>
+						tokenRow(
+							`space.${sample.label}`,
+							<SpacePreview label={sample.label} value={sample.value} />,
+							sample.value,
+						),
+					)}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Radii">
+				<TokenTable
+					caption="Radius tokens"
+					rows={radiusSamples.map((sample) =>
+						tokenRow(
+							`radius.${toKey(sample.label)}`,
+							<RadiusPreview label={sample.label} value={sample.value} />,
+							sample.value,
+						),
+					)}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Control and icon sizes">
+				<TokenTable
+					caption="Control and icon size tokens"
+					rows={sizeSamples.map((sample) =>
+						tokenRow(
+							`${sample.group}.${sample.token}`,
+							<SizePreview label={sample.label} value={sample.value} />,
+							sample.value,
+						),
+					)}
+				/>
+			</TokenSection>
+
+			<TokenSection title="Motion">
+				<TokenTable
+					caption="Motion tokens"
+					rows={motionSamples.map((sample) => ({
+						key: sample.label,
+						preview: <MotionPreview sample={sample} />,
+						values: [
+							{ path: `motion.duration.${sample.durationKey}`, value: sample.duration },
+							{ path: `motion.easing.${sample.easingKey}`, value: sample.easing },
+						],
+					}))}
+				/>
+			</TokenSection>
+		</main>
+	);
+}
+
+function TokenSection({ children, title }: TokenSectionProps) {
+	return (
+		<section style={sectionStyle}>
+			<h2 style={{ margin: 0 }}>{title}</h2>
+			{children}
+		</section>
+	);
+}
+
+function TokenTable({ caption, rows }: TokenTableProps) {
+	return (
+		<div style={tableWrapStyle}>
+			<table style={tableStyle}>
+				<caption style={{ blockSize: 1, overflow: 'hidden', position: 'absolute', inlineSize: 1 }}>
+					{caption}
+				</caption>
+				<colgroup>
+					<col style={{ inlineSize: '9rem' }} />
+					<col style={{ inlineSize: '17rem' }} />
+					<col style={{ inlineSize: '14rem' }} />
+					<col style={{ inlineSize: '22rem' }} />
+				</colgroup>
+				<thead>
+					<tr>
+						<th scope="col" style={headerCellStyle}>
+							Preview
+						</th>
+						<th scope="col" style={headerCellStyle}>
+							Semantic token
+						</th>
+						<th scope="col" style={headerCellStyle}>
+							Resolved value
+						</th>
+						<th scope="col" style={headerCellStyle}>
+							CSS variable
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{rows.map((row) => (
+						<tr key={row.key}>
+							<td style={cellStyle}>{row.preview}</td>
+							<td style={cellStyle}>
+								<div style={valueListStyle}>
+									{row.values.map((datum) => (
+										<code key={datum.path} style={codeStyle}>
+											{datum.path}
+										</code>
+									))}
+								</div>
+							</td>
+							<td style={cellStyle}>
+								<div style={valueListStyle}>
+									{row.values.map((datum) => (
+										<ResolvedValue key={datum.path} path={datum.path} value={datum.value} />
+									))}
+								</div>
+							</td>
+							<td style={cellStyle}>
+								<div style={valueListStyle}>
+									{row.values.map((datum) => (
+										<code key={datum.path} style={codeStyle}>
+											{customPropertyName(datum.value)}
+										</code>
+									))}
+								</div>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function ResolvedValue({ path, value }: { path: string; value: string }) {
+	const ref = useRef<HTMLElement>(null);
+	const [resolvedValue, setResolvedValue] = useState('');
+
+	useLayoutEffect(() => {
+		if (!ref.current) return;
+		const element = ref.current;
+		const updateValue = () => {
+			const propertyName = customPropertyName(value);
+			const nextValue = propertyName.startsWith('--')
+				? getComputedStyle(element).getPropertyValue(propertyName).trim()
+				: value;
+			setResolvedValue((currentValue) => (currentValue === nextValue ? currentValue : nextValue));
+		};
+		const themeRoot = element.closest('[data-color-mode]');
+		const observer = new MutationObserver(updateValue);
+
+		updateValue();
+		if (themeRoot) {
+			observer.observe(themeRoot, {
+				attributeFilter: ['class', 'data-color-mode'],
+				attributes: true,
+			});
+		}
+
+		return () => observer.disconnect();
+	}, [value]);
+
+	return (
+		<code data-token-path={path} ref={ref} style={codeStyle}>
+			{resolvedValue || 'Resolving…'}
+		</code>
+	);
+}
+
+function ColorPreview({ label, value }: { label: string; value: string }) {
+	return <span aria-label={label} role="img" style={{ ...swatchStyle, backgroundColor: value }} />;
+}
+
+function TextPreview({ label, value }: { label: string; value: string }) {
+	return <span aria-label={label} role="img" style={{ ...swatchStyle, backgroundColor: value }} />;
+}
+
+function BorderPreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span
+			aria-label={label}
+			role="img"
+			style={{
+				...swatchStyle,
+				backgroundColor: vars.color.surface.resting,
+				borderColor: value,
+				borderWidth: 3,
+			}}
+		/>
+	);
+}
+
+function IntentRolePreview({
+	intentLabel,
+	sample,
+}: {
+	intentLabel: string;
+	sample: IntentRoleSample;
+}) {
+	if (sample.preview === 'border') {
+		return <BorderPreview label={`${intentLabel} intent border sample`} value={sample.value} />;
+	}
+
+	return (
+		<span
+			aria-label={`${intentLabel} intent ${sample.label.toLowerCase()} sample`}
+			role="img"
+			style={{
+				...previewFrameStyle,
+				backgroundColor: sample.background,
+				borderRadius: vars.radius.detail,
+				color: sample.value,
+				fontSize: vars.font[500].fontSize,
+				fontWeight: vars.font.weight.emphasis,
+			}}
+		>
+			Aa
+		</span>
+	);
+}
+
+function DepthPreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span
+			aria-label={label}
+			role="img"
+			style={{ ...swatchStyle, backgroundColor: vars.color.surface.resting, boxShadow: value }}
+		/>
+	);
+}
+
+function FinishPreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span
+			aria-label={label}
+			role="img"
+			style={{
+				...swatchStyle,
+				backgroundColor: vars.color.intent.neutral.surface.solid,
+				backgroundImage: value,
+			}}
+		/>
+	);
+}
+
+function SpacePreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span style={{ ...previewFrameStyle, justifyContent: 'flex-start' }}>
+			<span
+				aria-label={`Space ${label} sample`}
+				role="img"
+				style={{
+					backgroundColor: vars.color.intent.accent.surface.solid,
+					blockSize: vars.space[300],
+					display: 'inline-block',
+					inlineSize: value,
+				}}
+			/>
+		</span>
+	);
+}
+
+function RadiusPreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span
+			aria-label={`${label} radius sample`}
+			role="img"
+			style={{ ...swatchStyle, backgroundColor: vars.color.surface.recessed, borderRadius: value }}
+		/>
+	);
+}
+
+function SizePreview({ label, value }: { label: string; value: string }) {
+	return (
+		<span style={previewFrameStyle}>
+			<span
+				aria-label={`${label} size sample`}
+				role="img"
+				style={{
+					backgroundColor: vars.color.intent.accent.surface.solid,
+					blockSize: value,
+					borderRadius: vars.radius.detail,
+					display: 'inline-block',
+					inlineSize: value,
+				}}
+			/>
+		</span>
+	);
+}
+
+function MotionPreview({ sample }: { sample: MotionSample }) {
+	return (
+		<span
+			style={{
+				...previewFrameStyle,
+				backgroundColor: vars.color.surface.recessed,
+				borderRadius: vars.radius.full,
+				justifyContent: 'flex-start',
+				paddingInline: vars.space[100],
+			}}
+		>
+			<span
+				aria-label={sample.accessibleLabel}
+				data-token-motion
+				role="img"
+				style={{
+					animationDirection: 'alternate',
+					animationDuration: sample.duration,
+					animationIterationCount: 'infinite',
+					animationName: 'luke-token-motion',
+					animationTimingFunction: sample.easing,
+					backgroundColor: vars.color.intent.accent.surface.solid,
+					blockSize: vars.iconSize.xsmall,
+					borderRadius: vars.radius.full,
+					display: 'inline-block',
+					inlineSize: vars.iconSize.xsmall,
+				}}
+			/>
+		</span>
+	);
+}
+
+function tokenRow(path: string, previewNode: ReactNode, value: string): TokenRow {
+	return { key: path, preview: previewNode, values: [{ path, value }] };
+}
+
+function fontStepData(label: string, step: FontStep): Array<TokenDatum> {
+	return [
+		{ path: `font.${label}.fontSize`, value: step.fontSize },
+		{ path: `font.${label}.lineHeight`, value: step.lineHeight },
+		{ path: `font.${label}.letterSpacing`, value: step.letterSpacing },
+		{ path: `font.${label}.baselineTrim`, value: step.baselineTrim },
+		{ path: `font.${label}.capHeightTrim`, value: step.capHeightTrim },
+	];
+}
+
+function intentSurfaceSamples(surface: IntentSurfaceVars): Array<ColorSample> {
+	return [
+		{ label: 'Subtle', value: surface.subtle },
+		{ label: 'Subtle hover', value: surface.subtleHover },
+		{ label: 'Subtle pressed', value: surface.subtlePressed },
+		{ label: 'Solid', value: surface.solid },
+		{ label: 'Solid hover', value: surface.solidHover },
+		{ label: 'Solid pressed', value: surface.solidPressed },
+	];
+}
+
+function intentRoles(
+	border: string,
+	text: string,
+	onSolid: string,
+	solid: string,
+): Array<IntentRoleSample> {
+	return [
+		{ key: 'border', label: 'Border', preview: 'border', value: border },
+		{ key: 'text', label: 'Text', preview: 'text', value: text },
+		{ background: solid, key: 'onSolid', label: 'On solid', preview: 'onSolid', value: onSolid },
+	];
+}
+
+function customPropertyName(value: string): string {
+	const match = /^var\((--[^,)]+)/.exec(value);
+	return match?.[1] ?? value;
+}
+
+function surfacePath(label: string): string {
+	if (label === 'Disabled') return 'color.surfaceDisabled';
+	if (label === 'Loading skeleton') return 'color.loadingSkeleton';
+	return `color.surface.${toKey(label)}`;
+}
+
+function toKey(label: string): string {
+	return label
+		.toLowerCase()
+		.replaceAll(/\s+(.)/g, (_match, letter: string) => letter.toUpperCase());
+}
diff --git a/packages/@luke-ui/react/src/tokens/converters.ts b/packages/@luke-ui/react/src/tokens/converters.ts
deleted file mode 100644
index 8404b2dc..00000000
--- a/packages/@luke-ui/react/src/tokens/converters.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { pxToRem } from '../utils/index.js';
-import type {
-	ColorTokenValue,
-	CubicBezierTokenValue,
-	DimensionTokenValue,
-	DurationTokenValue,
-} from './index.js';
-
-/** Converts a `DimensionTokenValue` to a rem string. */
-export function dimensionToRemString(value: DimensionTokenValue, base: number = 16): string {
-	return value.unit === 'rem' ? `${value.value}rem` : pxToRem(value.value, base);
-}
-
-/** Converts a `DurationTokenValue` to a CSS time string. */
-export function durationToString(value: DurationTokenValue): string {
-	return `${value.value}${value.unit}`;
-}
-
-/** Converts a `CubicBezierTokenValue` to a `cubic-bezier(...)` CSS string. */
-export function cubicBezierToString(value: CubicBezierTokenValue): string {
-	return `cubic-bezier(${value[0]}, ${value[1]}, ${value[2]}, ${value[3]})`;
-}
-
-const functionLikeColorSpaces = new Set(['hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch']);
-
-/** Converts a `ColorTokenValue` to a CSS color string. */
-export function colorToCssString(value: ColorTokenValue): string {
-	if (value.components.length === 0) {
-		throw new Error(`Color token "${value.colorSpace}" has no components`);
-	}
-
-	const components = value.components.map((component) => formatNumber(component));
-	const alphaSuffix =
-		value.alpha === undefined || value.alpha === 1 ? '' : ` / ${formatNumber(value.alpha)}`;
-
-	if (functionLikeColorSpaces.has(value.colorSpace)) {
-		return `${value.colorSpace}(${components.join(' ')}${alphaSuffix})`;
-	}
-
-	return `color(${value.colorSpace} ${components.join(' ')}${alphaSuffix})`;
-}
-
-function formatNumber(value: number): string {
-	if (!Number.isFinite(value)) {
-		throw new Error(`Invalid numeric color component: ${value}`);
-	}
-
-	const normalized = Object.is(value, -0) ? 0 : value;
-	return `${normalized}`;
-}
-
-export function isColorTokenValue(v: unknown): v is ColorTokenValue {
-	return (
-		typeof v === 'object' &&
-		v !== null &&
-		'colorSpace' in v &&
-		typeof v.colorSpace === 'string' &&
-		'components' in v &&
-		Array.isArray(v.components)
-	);
-}
-
-function isCubicBezierTokenValue(v: unknown): v is CubicBezierTokenValue {
-	return Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === 'number');
-}
-
-function isDimensionTokenValue(v: unknown): v is DimensionTokenValue {
-	return (
-		typeof v === 'object' &&
-		v !== null &&
-		'unit' in v &&
-		(v.unit === 'px' || v.unit === 'rem') &&
-		'value' in v &&
-		typeof v.value === 'number'
-	);
-}
-
-function isDurationTokenValue(v: unknown): v is DurationTokenValue {
-	return (
-		typeof v === 'object' &&
-		v !== null &&
-		'unit' in v &&
-		(v.unit === 'ms' || v.unit === 's') &&
-		'value' in v &&
-		typeof v.value === 'number'
-	);
-}
-
-/**
- * Convert a token value to its CSS string form, dispatching on the token's
- * `$type`. Values whose shape does not match the declared type fall back to
- * `String(value)` so a malformed token never crashes the build.
- */
-export function toCssValue(type: string, value: unknown): string {
-	switch (type) {
-		case 'color':
-			if (isColorTokenValue(value)) return colorToCssString(value);
-			break;
-		case 'cubicBezier':
-			if (isCubicBezierTokenValue(value)) return cubicBezierToString(value);
-			break;
-		case 'dimension':
-			if (isDimensionTokenValue(value)) return dimensionToRemString(value);
-			break;
-		case 'duration':
-			if (isDurationTokenValue(value)) return durationToString(value);
-			break;
-	}
-	return String(value);
-}
diff --git a/packages/@luke-ui/react/src/tokens/groups.ts b/packages/@luke-ui/react/src/tokens/groups.ts
deleted file mode 100644
index af7e8968..00000000
--- a/packages/@luke-ui/react/src/tokens/groups.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { DesignTokenGroup, TokenName } from './index.js';
-
-/** Constructs a typed `DesignTokenGroup` from a type string and a values record. */
-export function toTokenGroup<TType extends string, TValues extends Record<string, unknown>>(
-	type: TType,
-	values: TValues,
-): DesignTokenGroup<TType, TValues> {
-	const group = { $type: type } as DesignTokenGroup<TType, TValues>;
-
-	for (const key in values) {
-		(group as Record<string, unknown>)[key] = {
-			$value: values[key],
-		};
-	}
-
-	return group;
-}
-
-/** Returns the token names from a `DesignTokenGroup`, excluding the `$type` key. */
-export function tokenKeys<TGroup extends { $type: string }>(
-	group: TGroup,
-): Array<TokenName<TGroup>> {
-	return (Object.keys(group) as Array<keyof TGroup>).filter(
-		(key): key is TokenName<TGroup> => key !== '$type',
-	);
-}
diff --git a/packages/@luke-ui/react/src/tokens/index.ts b/packages/@luke-ui/react/src/tokens/index.ts
deleted file mode 100644
index b22e9e2b..00000000
--- a/packages/@luke-ui/react/src/tokens/index.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import {
-	backgroundColorTokenValues,
-	borderColorTokenValues,
-	foregroundColorTokenValues,
-	themeColorTokenValues,
-} from '../../.generated/color-tokens.generated.js';
-import { toTokenGroup } from './groups.js';
-import { minMediaQueries } from './media-queries.js';
-import {
-	borderRadiusValues,
-	borderWidthValues,
-	boxShadowValues,
-	breakpointValues,
-	controlSizeValues,
-	fontFamilyValues,
-	fontSizeValues,
-	fontWeightValues,
-	iconSizeValues,
-	lineHeightValues,
-	motionDurationValues,
-	motionEasingValues,
-	spaceValues,
-} from './values.js';
-
-/** Structured value for a dimension token, expressed in px or rem. */
-export interface DimensionTokenValue {
-	unit: 'px' | 'rem';
-	value: number;
-}
-
-/** Structured value for a duration token, expressed in ms or s. */
-export interface DurationTokenValue {
-	unit: 'ms' | 's';
-	value: number;
-}
-
-/** Structured value for a color token with optional alpha and color-space components. */
-export interface ColorTokenValue {
-	alpha?: number;
-	colorSpace: string;
-	components: Array<number>;
-}
-
-/** Structured value for a cubic-bezier easing token as a 4-number tuple. */
-export type CubicBezierTokenValue = readonly [number, number, number, number];
-
-/** A single design token wrapping a typed value. */
-export type DesignToken<TValue> = {
-	$value: TValue;
-};
-
-/** A group of design tokens sharing a common `$type`, keyed by token name. */
-export type DesignTokenGroup<TType extends string, TValues extends Record<string, unknown>> = {
-	$type: TType;
-} & {
-	[Key in keyof TValues]: DesignToken<TValues[Key]>;
-};
-
-/** Extracts the string token names from a `DesignTokenGroup`, excluding `$type`. */
-export type TokenName<TGroup extends { $type: string }> = Extract<
-	Exclude<keyof TGroup, '$type'>,
-	string
->;
-
-export {
-	colorToCssString,
-	cubicBezierToString,
-	dimensionToRemString,
-	durationToString,
-	isColorTokenValue,
-	toCssValue,
-} from './converters.js';
-export { tokenKeys, toTokenGroup } from './groups.js';
-export type { Breakpoint } from './media-queries.js';
-export { minMediaQueries } from './media-queries.js';
-export {
-	borderRadiusValues,
-	borderWidthValues,
-	boxShadowValues,
-	breakpointValues,
-	controlSizeValues,
-	fontFamilyValues,
-	fontSizeValues,
-	fontWeightValues,
-	iconSizeValues,
-	lineHeightValues,
-	motionDurationValues,
-	motionEasingValues,
-	spaceValues,
-} from './values.js';
-
-/** The complete design-token object, grouped by category, ready to use in vanilla-extract themes. */
-export const tokens = {
-	backgroundColor: toTokenGroup('color', backgroundColorTokenValues),
-	borderColor: toTokenGroup('color', borderColorTokenValues),
-	borderRadius: toTokenGroup('dimension', borderRadiusValues),
-	borderWidth: toTokenGroup('dimension', borderWidthValues),
-	boxShadow: toTokenGroup('string', boxShadowValues),
-	breakpoints: toTokenGroup('dimension', breakpointValues),
-	controlSize: toTokenGroup('dimension', controlSizeValues),
-	fontFamily: toTokenGroup('fontFamily', fontFamilyValues),
-	fontSize: toTokenGroup('dimension', fontSizeValues),
-	fontWeight: toTokenGroup('fontWeight', fontWeightValues),
-	foregroundColor: toTokenGroup('color', foregroundColorTokenValues),
-	iconSize: toTokenGroup('dimension', iconSizeValues),
-	lineHeight: toTokenGroup('number', lineHeightValues),
-	mediaQueries: {
-		min: toTokenGroup('mediaQuery', minMediaQueries),
-	},
-	motionDuration: toTokenGroup('duration', motionDurationValues),
-	motionEasing: toTokenGroup('cubicBezier', motionEasingValues),
-	space: toTokenGroup('dimension', spaceValues),
-	themeColor: toTokenGroup('color', themeColorTokenValues),
-} as const;
-
-/** The full type of the `tokens` object. */
-export type Tokens = typeof tokens;
-/** Union of valid control-size token names. */
-export type ControlSizeToken = TokenName<Tokens['controlSize']>;
-/** Union of valid font-family token names. */
-export type FontFamilyToken = TokenName<Tokens['fontFamily']>;
-/** Union of valid font-size token names. */
-export type FontSizeToken = TokenName<Tokens['fontSize']>;
-/** Union of valid font-weight token names. */
-export type FontWeightToken = TokenName<Tokens['fontWeight']>;
-/** Union of valid foreground-color token names. */
-export type ForegroundColorToken = TokenName<Tokens['foregroundColor']>;
-/** Union of valid icon-size token names. */
-export type IconSizeToken = TokenName<Tokens['iconSize']>;
-/** Union of valid line-height token names. */
-export type LineHeightToken = TokenName<Tokens['lineHeight']>;
diff --git a/packages/@luke-ui/react/src/tokens/media-queries.ts b/packages/@luke-ui/react/src/tokens/media-queries.ts
deleted file mode 100644
index fe8c5fdb..00000000
--- a/packages/@luke-ui/react/src/tokens/media-queries.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { typedKeys } from '../utils/index.js';
-import { dimensionToRemString } from './converters.js';
-import { breakpointValues } from './values.js';
-
-/** The available breakpoint names (e.g. `'small' | 'medium' | ...`). */
-export type Breakpoint = keyof typeof breakpointValues;
-
-/** Prebuilt `@media (width >= ...)` query strings keyed by breakpoint name. */
-export const minMediaQueries = Object.fromEntries(
-	typedKeys(breakpointValues).map((breakpoint) => [
-		breakpoint,
-		`@media(width >= ${dimensionToRemString(breakpointValues[breakpoint])})`,
-	]),
-) as Record<Breakpoint, string>;
diff --git a/packages/@luke-ui/react/src/tokens/tokens-vars.stories.tsx b/packages/@luke-ui/react/src/tokens/tokens-vars.stories.tsx
deleted file mode 100644
index 29eae79d..00000000
--- a/packages/@luke-ui/react/src/tokens/tokens-vars.stories.tsx
+++ /dev/null
@@ -1,953 +0,0 @@
-import { Heading } from '@luke-ui/react/heading';
-import { Text } from '@luke-ui/react/text';
-import type { ColorTokenValue } from '@luke-ui/react/tokens';
-import {
-	colorToCssString,
-	isColorTokenValue,
-	toCssValue,
-	tokenKeys,
-	tokens,
-} from '@luke-ui/react/tokens';
-import ColorJs from 'colorjs.io';
-import type { CSSProperties } from 'react';
-import { expect } from 'storybook/test';
-import preview from '../../.storybook/preview.js';
-import { vars } from '../theme.css.js';
-
-type StoryTokenGroup = {
-	$type: string;
-	[key: string]: { $value: unknown } | string;
-};
-
-type TokenRow = {
-	cssValue: string;
-	groupName: string;
-	path: string;
-	type: string;
-	value: string;
-};
-
-type ExampleRow = {
-	cssValue: string;
-	displayValue: string;
-	path: string;
-	tokenName: string;
-};
-
-type VarRow = {
-	cssVar: string;
-	path: string;
-};
-
-type ExampleMode =
-	| 'background'
-	| 'border'
-	| 'borderWidth'
-	| 'breakpoint'
-	| 'controlSize'
-	| 'duration'
-	| 'easing'
-	| 'fontFamily'
-	| 'fontSize'
-	| 'fontWeight'
-	| 'foreground'
-	| 'iconSize'
-	| 'lineHeight'
-	| 'mediaQuery'
-	| 'radius'
-	| 'shadow'
-	| 'space';
-
-const tokenGroups = [
-	['backgroundColor', tokens.backgroundColor],
-	['borderColor', tokens.borderColor],
-	['borderRadius', tokens.borderRadius],
-	['borderWidth', tokens.borderWidth],
-	['boxShadow', tokens.boxShadow],
-	['breakpoints', tokens.breakpoints],
-	['controlSize', tokens.controlSize],
-	['fontFamily', tokens.fontFamily],
-	['fontSize', tokens.fontSize],
-	['fontWeight', tokens.fontWeight],
-	['foregroundColor', tokens.foregroundColor],
-	['iconSize', tokens.iconSize],
-	['lineHeight', tokens.lineHeight],
-	['mediaQueries.min', tokens.mediaQueries.min],
-	['motionDuration', tokens.motionDuration],
-	['motionEasing', tokens.motionEasing],
-	['space', tokens.space],
-	['themeColor', tokens.themeColor],
-] as const;
-
-const tokenRows = tokenGroups
-	.flatMap(([groupName, group]) => getTokenRows(groupName, group))
-	.sort((a, b) => a.path.localeCompare(b.path));
-
-const varRows = getVarRows(vars).sort((a, b) => a.path.localeCompare(b.path));
-
-const backgroundColorRows = getColorRows('backgroundColor', tokens.backgroundColor);
-const foregroundColorRows = getColorRows('foregroundColor', tokens.foregroundColor);
-const borderColorRows = getColorRows('borderColor', tokens.borderColor);
-const themeColorRows = getColorRows('themeColor', tokens.themeColor);
-
-const spaceRows = getDimensionRows('space', tokens.space);
-const shadowRows = getStringRows('boxShadow', tokens.boxShadow);
-const borderRadiusRows = getDimensionRows('borderRadius', tokens.borderRadius);
-const borderWidthRows = getDimensionRows('borderWidth', tokens.borderWidth);
-const fontSizeRows = getDimensionRows('fontSize', tokens.fontSize);
-const lineHeightRows = getNumberRows('lineHeight', tokens.lineHeight);
-const fontWeightRows = getNumberRows('fontWeight', tokens.fontWeight);
-const fontFamilyRows = getStringRows('fontFamily', tokens.fontFamily);
-const controlSizeRows = getDimensionRows('controlSize', tokens.controlSize);
-const iconSizeRows = getDimensionRows('iconSize', tokens.iconSize);
-const motionDurationRows = getDurationRows('motionDuration', tokens.motionDuration);
-const motionEasingRows = getCubicBezierRows('motionEasing', tokens.motionEasing);
-const breakpointRows = getDimensionRows('breakpoints', tokens.breakpoints);
-const mediaQueryRows = getStringRows('mediaQueries.min', tokens.mediaQueries.min);
-
-const meta = preview.meta({
-	component: TokensVarsReference,
-	tags: ['theme'],
-	title: 'Theme/Tokens & Vars',
-});
-
-function css<TStyle extends CSSProperties>(style: TStyle): TStyle {
-	return style;
-}
-
-function columnStyle(inlineSize: string): CSSProperties {
-	return css({ inlineSize });
-}
-
-const stackStyle = css({
-	display: 'flex',
-	flexDirection: 'column',
-	gap: '1.5rem',
-	maxInlineSize: '100%',
-});
-
-const sectionStyle = css({
-	display: 'flex',
-	flexDirection: 'column',
-	gap: '0.75rem',
-});
-
-const tableWrapStyle = css({
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.medium,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	inlineSize: '100%',
-	maxInlineSize: '100%',
-	overflow: 'auto',
-});
-
-const tokenReferenceTableStyle = css({
-	borderCollapse: 'collapse',
-	fontFamily: vars.font.family.mono,
-	fontSize: vars.font.size.standard,
-	inlineSize: '100%',
-	minInlineSize: '82rem',
-	tableLayout: 'fixed',
-});
-
-const varsReferenceTableStyle = css({
-	borderCollapse: 'collapse',
-	fontFamily: vars.font.family.mono,
-	fontSize: vars.font.size.standard,
-	inlineSize: '100%',
-	minInlineSize: '64rem',
-	tableLayout: 'fixed',
-});
-
-const headerCellStyle = css({
-	backgroundColor: vars.backgroundColor.subtle,
-	borderBlockEndColor: vars.border.default,
-	borderBlockEndStyle: 'solid',
-	borderBlockEndWidth: 1,
-	fontWeight: vars.font.weight.bold,
-	paddingBlock: vars.space.xsmall,
-	paddingInline: vars.space.small,
-	textAlign: 'start',
-	whiteSpace: 'nowrap',
-});
-
-const cellStyle = css({
-	borderBlockEndColor: vars.border.default,
-	borderBlockEndStyle: 'solid',
-	borderBlockEndWidth: 1,
-	overflowWrap: 'anywhere',
-	paddingBlock: vars.space.xsmall,
-	paddingInline: vars.space.small,
-	verticalAlign: 'top',
-});
-
-const headingStyle = css({
-	fontFamily: vars.font.family.body,
-	fontSize: vars.font.size.medium,
-	fontWeight: vars.font.weight.bold,
-	lineHeight: vars.font.lineHeight.tight,
-	margin: 0,
-});
-
-const descriptionStyle = css({
-	color: vars.foregroundColor.secondary,
-	fontFamily: vars.font.family.body,
-	margin: 0,
-});
-
-const previewSwatchStyle = css({
-	blockSize: '1.5rem',
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.small,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	display: 'inline-block',
-	inlineSize: '4rem',
-});
-
-const previewBoxStyle = css({
-	backgroundColor: vars.backgroundColor.default,
-	blockSize: '1.5rem',
-	borderColor: vars.border.default,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	display: 'inline-block',
-	inlineSize: '4rem',
-});
-
-const previewTextStyle = css({
-	fontFamily: vars.font.family.body,
-	fontSize: vars.font.size.standard,
-	fontWeight: vars.font.weight.bold,
-});
-
-const mutedPreviewStyle = css({
-	color: vars.foregroundColor.secondary,
-});
-
-const docsPageStyle = css({
-	backgroundColor: vars.backgroundColor.default,
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.large,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	display: 'flex',
-	flexDirection: 'column',
-	gap: vars.space.large,
-	paddingBlock: vars.space.large,
-	paddingInline: vars.space.large,
-});
-
-const docsMainStyle = css({
-	display: 'flex',
-	flexDirection: 'column',
-	gap: vars.space.large,
-	minInlineSize: 0,
-});
-
-const tokenSectionStyle = css({
-	display: 'flex',
-	flexDirection: 'column',
-	gap: vars.space.small,
-});
-
-const tokenTableWrapStyle = css({
-	backgroundColor: vars.backgroundColor.default,
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.medium,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	overflow: 'auto',
-});
-
-const tokenTableStyle = css({
-	borderCollapse: 'collapse',
-	fontFamily: vars.font.family.body,
-	fontSize: vars.font.size.standard,
-	inlineSize: '100%',
-	minInlineSize: '50rem',
-	tableLayout: 'fixed',
-});
-
-const tokenTableHeaderCellStyle = css({
-	backgroundColor: vars.backgroundColor.subtle,
-	borderBlockEndColor: vars.border.default,
-	borderBlockEndStyle: 'solid',
-	borderBlockEndWidth: 1,
-	fontWeight: vars.font.weight.bold,
-	paddingBlock: vars.space.small,
-	paddingInline: vars.space.small,
-	textAlign: 'start',
-});
-
-const tokenTableCellStyle = css({
-	borderBlockEndColor: vars.border.default,
-	borderBlockEndStyle: 'solid',
-	borderBlockEndWidth: 1,
-	overflowWrap: 'anywhere',
-	paddingBlock: vars.space.small,
-	paddingInline: vars.space.small,
-	verticalAlign: 'middle',
-});
-
-const examplesColExampleStyle = columnStyle('20rem');
-const examplesColTokenKeyStyle = columnStyle('16rem');
-const examplesColTokenValueStyle = columnStyle('14rem');
-
-const tokenRefColPathStyle = columnStyle('24rem');
-const tokenRefColTypeStyle = columnStyle('8rem');
-const tokenRefColRawStyle = columnStyle('24rem');
-const tokenRefColCssStyle = columnStyle('18rem');
-const tokenRefColPreviewStyle = columnStyle('8rem');
-
-const varsRefColPathStyle = columnStyle('24rem');
-const varsRefColValueStyle = columnStyle('28rem');
-const varsRefColPreviewStyle = columnStyle('10rem');
-
-const tokenPillStyle = css({
-	backgroundColor: vars.backgroundColor.subtle,
-	borderRadius: vars.borderRadius.small,
-	display: 'inline-flex',
-	fontFamily: vars.font.family.mono,
-	fontSize: vars.font.size.standard,
-	fontWeight: vars.font.weight.medium,
-	paddingBlock: vars.space.xxsmall,
-	paddingInline: vars.space.xsmall,
-});
-
-const tokenValueStyle = css({
-	fontFamily: vars.font.family.mono,
-	fontSize: vars.font.size.standard,
-});
-
-const exampleBarStyle = css({
-	blockSize: '2.75rem',
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.small,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	inlineSize: '14rem',
-	maxInlineSize: '100%',
-});
-
-const sampleTextStyle = css({
-	color: vars.foregroundColor.primary,
-	fontFamily: vars.font.family.body,
-	fontSize: vars.font.size.standard,
-	fontWeight: vars.font.weight.regular,
-});
-
-const motionTrackStyle = css({
-	...exampleBarStyle,
-	alignItems: 'center',
-	display: 'flex',
-	paddingInline: vars.space.xsmall,
-});
-
-const motionRailStyle = css({
-	backgroundColor: vars.backgroundColor.inputDisabled,
-	blockSize: '1.25rem',
-	borderColor: vars.border.default,
-	borderRadius: vars.borderRadius.full,
-	borderStyle: 'solid',
-	borderWidth: 1,
-	inlineSize: '100%',
-	position: 'relative',
-});
-
-const motionDotBaseStyle = css({
-	backgroundColor: vars.themeColor.paletteThemePrimary600,
-	blockSize: '1rem',
-	borderRadius: vars.borderRadius.full,
-	boxShadow: `0 0 0 ${vars.space.xxsmall} ${vars.themeColor.paletteThemePrimary200}`,
-	display: 'inline-block',
-	insetBlockStart: '50%',
-	position: 'absolute',
-	transform: 'translateY(-50%)',
-});
-
-const motionPreviewDefaultDuration = '1200ms';
-const motionPreviewDefaultEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';
-const motionDotInset = '0.25rem';
-const motionDotSize = '1rem';
-const motionPreviewAnimationName = 'luke-ui-motion-token-preview';
-
-function formatRawValue(value: unknown): string {
-	if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-
-	return JSON.stringify(value);
-}
-
-function colorToDisplayValue(value: ColorTokenValue): string {
-	if (value.colorSpace === 'srgb' && value.alpha === undefined) {
-		try {
-			const color = new ColorJs(colorToCssString(value));
-			return color.toString({ collapse: false, format: 'hex' }).toUpperCase();
-		} catch {
-			return colorToCssString(value);
-		}
-	}
-
-	return colorToCssString(value);
-}
-
-function getTokenValue(group: StoryTokenGroup, tokenName: string, groupName: string): unknown {
-	const token = group[tokenName];
-	if (token && typeof token === 'object' && '$value' in token) {
-		return token.$value;
-	}
-
-	throw new TypeError(`Expected token value for ${groupName}.${tokenName}`);
-}
-
-function getTokenRows(groupName: string, group: StoryTokenGroup): Array<TokenRow> {
-	return tokenKeys(group).map((tokenName) => {
-		const tokenValue = getTokenValue(group, tokenName, groupName);
-		return {
-			cssValue: toCssValue(group.$type, tokenValue),
-			groupName,
-			path: `${groupName}.${tokenName}`,
-			type: group.$type,
-			value: formatRawValue(tokenValue),
-		};
-	});
-}
-
-function getRows(
-	groupName: string,
-	group: StoryTokenGroup,
-	toValues: (value: unknown) => { cssValue: string; displayValue: string },
-): Array<ExampleRow> {
-	return tokenKeys(group).map((tokenName) => {
-		const tokenValue = getTokenValue(group, tokenName, groupName);
-		const values = toValues(tokenValue);
-		return {
-			cssValue: values.cssValue,
-			displayValue: values.displayValue,
-			path: `${groupName}.${tokenName}`,
-			tokenName,
-		};
-	});
-}
-
-function getColorRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	if (group.$type !== 'color') {
-		return [];
-	}
-
-	return getRows(groupName, group, (value) => {
-		if (!isColorTokenValue(value)) {
-			return { cssValue: String(value), displayValue: String(value) };
-		}
-		return {
-			cssValue: colorToCssString(value),
-			displayValue: colorToDisplayValue(value),
-		};
-	});
-}
-
-function getDimensionRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	if (group.$type !== 'dimension') {
-		return [];
-	}
-
-	return getRows(groupName, group, (value) => {
-		const cssValue = toCssValue('dimension', value);
-		return { cssValue, displayValue: cssValue };
-	});
-}
-
-function getDurationRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	if (group.$type !== 'duration') {
-		return [];
-	}
-
-	return getRows(groupName, group, (value) => {
-		const cssValue = toCssValue('duration', value);
-		return { cssValue, displayValue: cssValue };
-	});
-}
-
-function getCubicBezierRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	if (group.$type !== 'cubicBezier') {
-		return [];
-	}
-
-	return getRows(groupName, group, (value) => {
-		const cssValue = toCssValue('cubicBezier', value);
-		return { cssValue, displayValue: cssValue };
-	});
-}
-
-function getNumberRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	if (group.$type !== 'number' && group.$type !== 'fontWeight') {
-		return [];
-	}
-
-	return getRows(groupName, group, (value) => {
-		const stringValue = String(value);
-		return { cssValue: stringValue, displayValue: stringValue };
-	});
-}
-
-function getStringRows(groupName: string, group: StoryTokenGroup): Array<ExampleRow> {
-	return getRows(groupName, group, (value) => {
-		const stringValue = String(value);
-		return { cssValue: stringValue, displayValue: stringValue };
-	});
-}
-
-function getVarRows(node: unknown, path: Array<string> = []): Array<VarRow> {
-	if (typeof node === 'string') {
-		return node.startsWith('var(--') ? [{ cssVar: node, path: path.join('.') }] : [];
-	}
-
-	if (!node || typeof node !== 'object') {
-		return [];
-	}
-
-	return Object.entries(node).flatMap(([key, value]) => getVarRows(value, [...path, key]));
-}
-
-function TokenPreview({ row }: { row: TokenRow }) {
-	if (row.type === 'color') {
-		return <span style={{ ...previewSwatchStyle, backgroundColor: row.cssValue }} />;
-	}
-
-	if (row.groupName === 'borderRadius') {
-		return (
-			<span
-				style={{
-					...previewBoxStyle,
-					borderRadius: row.cssValue,
-				}}
-			/>
-		);
-	}
-
-	if (row.groupName === 'boxShadow') {
-		return <span style={{ ...previewBoxStyle, boxShadow: row.cssValue }} />;
-	}
-
-	if (row.groupName === 'borderWidth') {
-		return (
-			<span
-				style={{
-					...previewBoxStyle,
-					borderWidth: row.cssValue,
-				}}
-			/>
-		);
-	}
-
-	return <span style={mutedPreviewStyle}>-</span>;
-}
-
-function VarPreview({ row }: { row: VarRow }) {
-	if (row.path.includes('foregroundColor')) {
-		return <span style={{ ...previewTextStyle, color: row.cssVar }}>Aa</span>;
-	}
-
-	if (row.path.includes('backgroundColor') || row.path.includes('themeColor')) {
-		return <span style={{ ...previewSwatchStyle, backgroundColor: row.cssVar }} />;
-	}
-
-	if (row.path.includes('borderColor') || row.path.startsWith('border.')) {
-		return (
-			<span
-				style={{
-					...previewBoxStyle,
-					borderColor: row.cssVar,
-				}}
-			/>
-		);
-	}
-
-	if (row.path.includes('boxShadow')) {
-		return <span style={{ ...previewBoxStyle, boxShadow: row.cssVar }} />;
-	}
-
-	if (row.path.includes('borderRadius')) {
-		return (
-			<span
-				style={{
-					...previewBoxStyle,
-					borderRadius: row.cssVar,
-				}}
-			/>
-		);
-	}
-
-	return <span style={mutedPreviewStyle}>-</span>;
-}
-
-function SharedPreviewBox({ size }: { size: string }) {
-	return (
-		<span
-			style={{
-				backgroundColor: vars.themeColor.paletteThemePrimary300,
-				blockSize: size,
-				display: 'inline-block',
-				inlineSize: size,
-			}}
-		/>
-	);
-}
-
-function SizePreview({ size }: { size: string }) {
-	return (
-		<div
-			style={{
-				...exampleBarStyle,
-				display: 'grid',
-				placeItems: 'center',
-			}}
-		>
-			<SharedPreviewBox size={size} />
-		</div>
-	);
-}
-
-function MotionPreview({ duration, easing }: { duration: string; easing: string }) {
-	return (
-		<div style={motionTrackStyle}>
-			<style>{`@keyframes ${motionPreviewAnimationName} { from { inset-inline-start: ${motionDotInset}; } to { inset-inline-start: calc(100% - ${motionDotSize} - ${motionDotInset}); } }`}</style>
-			<div style={motionRailStyle}>
-				<span
-					style={{
-						...motionDotBaseStyle,
-						animationDirection: 'alternate',
-						animationDuration: duration,
-						animationIterationCount: 'infinite',
-						animationName: motionPreviewAnimationName,
-						animationTimingFunction: easing,
-						insetInlineStart: motionDotInset,
-					}}
-				/>
-			</div>
-		</div>
-	);
-}
-
-function RenderExamplePreview({ mode, row }: { mode: ExampleMode; row: ExampleRow }) {
-	switch (mode) {
-		case 'foreground':
-			return (
-				<div
-					style={{
-						...exampleBarStyle,
-						display: 'grid',
-						placeItems: 'center',
-					}}
-				>
-					<span style={{ ...previewTextStyle, color: row.cssValue }}>Aa</span>
-				</div>
-			);
-		case 'border':
-			return <div style={{ ...exampleBarStyle, borderColor: row.cssValue }} />;
-		case 'background':
-			return <div style={{ ...exampleBarStyle, backgroundColor: row.cssValue }} />;
-		case 'space': {
-			const boxSize = vars.space.large;
-			return (
-				<div
-					style={{
-						...exampleBarStyle,
-						alignItems: 'center',
-						display: 'flex',
-						paddingInline: vars.space.xsmall,
-					}}
-				>
-					<div
-						style={{
-							display: 'flex',
-							gap: row.cssValue,
-						}}
-					>
-						<SharedPreviewBox size={boxSize} />
-						<SharedPreviewBox size={boxSize} />
-						<SharedPreviewBox size={boxSize} />
-					</div>
-				</div>
-			);
-		}
-		case 'shadow':
-			return <div style={{ ...exampleBarStyle, boxShadow: row.cssValue }} />;
-		case 'radius':
-			return <div style={{ ...exampleBarStyle, borderRadius: row.cssValue }} />;
-		case 'borderWidth':
-			return <div style={{ ...exampleBarStyle, borderWidth: row.cssValue }} />;
-		case 'fontSize':
-			return <span style={{ ...sampleTextStyle, fontSize: row.cssValue }}>Sample text</span>;
-		case 'lineHeight':
-			return (
-				<span
-					style={{
-						...sampleTextStyle,
-						display: 'inline-block',
-						lineHeight: row.cssValue,
-					}}
-				>
-					Line one
-					<br />
-					Line two
-				</span>
-			);
-		case 'fontWeight':
-			return <span style={{ ...sampleTextStyle, fontWeight: row.cssValue }}>Weight</span>;
-		case 'fontFamily':
-			return (
-				<span style={{ ...sampleTextStyle, fontFamily: row.cssValue }}>Sphinx of black quartz</span>
-			);
-		case 'controlSize':
-		case 'iconSize':
-			return <SizePreview size={row.cssValue} />;
-		case 'breakpoint':
-			return <span style={tokenValueStyle}>{`min-width >= ${row.displayValue}`}</span>;
-		case 'duration':
-			return <MotionPreview duration={row.cssValue} easing={motionPreviewDefaultEasing} />;
-		case 'easing':
-			return <MotionPreview duration={motionPreviewDefaultDuration} easing={row.cssValue} />;
-		case 'mediaQuery':
-			return <span style={tokenValueStyle}>{row.displayValue}</span>;
-		default:
-			return <span style={mutedPreviewStyle}>-</span>;
-	}
-}
-
-function TokenExamplesTable({ mode, rows }: { mode: ExampleMode; rows: Array<ExampleRow> }) {
-	return (
-		<section style={tokenSectionStyle}>
-			<div style={tokenTableWrapStyle}>
-				<table style={tokenTableStyle}>
-					<colgroup>
-						<col style={examplesColExampleStyle} />
-						<col style={examplesColTokenKeyStyle} />
-						<col style={examplesColTokenValueStyle} />
-					</colgroup>
-					<thead>
-						<tr>
-							<th style={tokenTableHeaderCellStyle}>Example</th>
-							<th style={tokenTableHeaderCellStyle}>Token key</th>
-							<th style={tokenTableHeaderCellStyle}>Token value</th>
-						</tr>
-					</thead>
-					<tbody>
-						{rows.map((row) => (
-							<tr key={row.path}>
-								<td style={tokenTableCellStyle}>
-									<RenderExamplePreview mode={mode} row={row} />
-								</td>
-								<td style={tokenTableCellStyle}>
-									<span style={tokenPillStyle}>{row.tokenName}</span>
-								</td>
-								<td style={tokenTableCellStyle}>
-									<span style={tokenValueStyle}>{row.displayValue}</span>
-								</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
-			</div>
-		</section>
-	);
-}
-
-function TokensVarsReference() {
-	return (
-		<div style={stackStyle}>
-			<section style={sectionStyle}>
-				<h2 style={headingStyle}>Tokens</h2>
-				<p style={descriptionStyle}>
-					Design-token source values, computed CSS value, and a visual preview.
-				</p>
-				<div style={tableWrapStyle}>
-					<table style={tokenReferenceTableStyle}>
-						<colgroup>
-							<col style={tokenRefColPathStyle} />
-							<col style={tokenRefColTypeStyle} />
-							<col style={tokenRefColRawStyle} />
-							<col style={tokenRefColCssStyle} />
-							<col style={tokenRefColPreviewStyle} />
-						</colgroup>
-						<thead>
-							<tr>
-								<th style={headerCellStyle}>Path</th>
-								<th style={headerCellStyle}>Type</th>
-								<th style={headerCellStyle}>$value</th>
-								<th style={headerCellStyle}>CSS value</th>
-								<th style={headerCellStyle}>Preview</th>
-							</tr>
-						</thead>
-						<tbody>
-							{tokenRows.map((row) => (
-								<tr key={row.path}>
-									<td style={cellStyle}>{row.path}</td>
-									<td style={cellStyle}>{row.type}</td>
-									<td style={cellStyle}>{row.value}</td>
-									<td style={cellStyle}>{row.cssValue}</td>
-									<td style={cellStyle}>
-										<TokenPreview row={row} />
-									</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
-				</div>
-			</section>
-			<section style={sectionStyle}>
-				<h2 style={headingStyle}>CSS Variables</h2>
-				<p style={descriptionStyle}>
-					Flattened paths from `theme.vars`, including a quick visual preview.
-				</p>
-				<div style={tableWrapStyle}>
-					<table style={varsReferenceTableStyle}>
-						<colgroup>
-							<col style={varsRefColPathStyle} />
-							<col style={varsRefColValueStyle} />
-							<col style={varsRefColPreviewStyle} />
-						</colgroup>
-						<thead>
-							<tr>
-								<th style={headerCellStyle}>Path</th>
-								<th style={headerCellStyle}>Variable</th>
-								<th style={headerCellStyle}>Preview</th>
-							</tr>
-						</thead>
-						<tbody>
-							{varRows.map((row) => (
-								<tr key={row.path}>
-									<td style={cellStyle}>{row.path}</td>
-									<td style={cellStyle}>{row.cssVar}</td>
-									<td style={cellStyle}>
-										<VarPreview row={row} />
-									</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
-				</div>
-			</section>
-		</div>
-	);
-}
-
-type TokenTypeStoryConfig = {
-	description?: string;
-	mode: ExampleMode;
-	rows: Array<ExampleRow>;
-	title: string;
-};
-
-function TokenTypeStory({
-	description = 'A visual reference for this token type.',
-	mode,
-	rows,
-	title,
-}: TokenTypeStoryConfig) {
-	return (
-		<div style={docsPageStyle}>
-			<section style={sectionStyle}>
-				<Heading elementType="h1">{title}</Heading>
-				<Text color="secondary" elementType="p" size="400">
-					{description}
-				</Text>
-			</section>
-			<main style={docsMainStyle}>
-				<TokenExamplesTable mode={mode} rows={rows} />
-			</main>
-		</div>
-	);
-}
-
-type StoryCanvas = {
-	getByRole: (role: string, options: { name: string }) => unknown;
-};
-
-const tokenTypeStoryConfigs = {
-	backgroundColor: { mode: 'background', rows: backgroundColorRows, title: 'Background color' },
-	borderColor: { mode: 'border', rows: borderColorRows, title: 'Border color' },
-	borderRadius: { mode: 'radius', rows: borderRadiusRows, title: 'Border radius' },
-	borderWidth: { mode: 'borderWidth', rows: borderWidthRows, title: 'Border width' },
-	boxShadow: { mode: 'shadow', rows: shadowRows, title: 'Box shadow' },
-	breakpoints: { mode: 'breakpoint', rows: breakpointRows, title: 'Breakpoints' },
-	color: { mode: 'foreground', rows: foregroundColorRows, title: 'Color' },
-	controlSize: { mode: 'controlSize', rows: controlSizeRows, title: 'Control size' },
-	fontFamily: { mode: 'fontFamily', rows: fontFamilyRows, title: 'Font family' },
-	fontSize: { mode: 'fontSize', rows: fontSizeRows, title: 'Font size' },
-	fontWeight: { mode: 'fontWeight', rows: fontWeightRows, title: 'Font weight' },
-	iconSize: { mode: 'iconSize', rows: iconSizeRows, title: 'Icon size' },
-	lineHeight: { mode: 'lineHeight', rows: lineHeightRows, title: 'Line height' },
-	mediaQueries: { mode: 'mediaQuery', rows: mediaQueryRows, title: 'Media queries' },
-	motionDuration: { mode: 'duration', rows: motionDurationRows, title: 'Motion duration' },
-	motionEasing: { mode: 'easing', rows: motionEasingRows, title: 'Motion easing' },
-	space: { mode: 'space', rows: spaceRows, title: 'Space' },
-	themeColor: { mode: 'background', rows: themeColorRows, title: 'Theme color' },
-} satisfies Record<string, TokenTypeStoryConfig>;
-
-async function expectHeadingInStory(canvas: StoryCanvas, heading: string) {
-	await expect(canvas.getByRole('heading', { name: heading })).toBeInTheDocument();
-}
-
-function RenderTokenTypeStory(props: TokenTypeStoryConfig) {
-	return <TokenTypeStory {...props} />;
-}
-
-function tokenTypeStory(config: TokenTypeStoryConfig) {
-	return {
-		play: async ({ canvas }: { canvas: StoryCanvas }) => {
-			await expectHeadingInStory(canvas, config.title);
-		},
-		render: () => <RenderTokenTypeStory {...config} />,
-	};
-}
-
-export const BackgroundColor = meta.story(tokenTypeStory(tokenTypeStoryConfigs.backgroundColor));
-
-export const Color = meta.story(tokenTypeStory(tokenTypeStoryConfigs.color));
-
-export const BorderColor = meta.story(tokenTypeStory(tokenTypeStoryConfigs.borderColor));
-
-export const ThemeColor = meta.story(tokenTypeStory(tokenTypeStoryConfigs.themeColor));
-
-export const Space = meta.story(tokenTypeStory(tokenTypeStoryConfigs.space));
-
-export const BoxShadow = meta.story(tokenTypeStory(tokenTypeStoryConfigs.boxShadow));
-
-export const BorderRadius = meta.story(tokenTypeStory(tokenTypeStoryConfigs.borderRadius));
-
-export const BorderWidth = meta.story(tokenTypeStory(tokenTypeStoryConfigs.borderWidth));
-
-export const FontSize = meta.story(tokenTypeStory(tokenTypeStoryConfigs.fontSize));
-
-export const LineHeight = meta.story(tokenTypeStory(tokenTypeStoryConfigs.lineHeight));
-
-export const FontWeight = meta.story(tokenTypeStory(tokenTypeStoryConfigs.fontWeight));
-
-export const FontFamily = meta.story(tokenTypeStory(tokenTypeStoryConfigs.fontFamily));
-
-export const ControlSize = meta.story(tokenTypeStory(tokenTypeStoryConfigs.controlSize));
-
-export const IconSize = meta.story(tokenTypeStory(tokenTypeStoryConfigs.iconSize));
-
-export const MotionDuration = meta.story(tokenTypeStory(tokenTypeStoryConfigs.motionDuration));
-
-export const MotionEasing = meta.story(tokenTypeStory(tokenTypeStoryConfigs.motionEasing));
-
-export const Breakpoints = meta.story(tokenTypeStory(tokenTypeStoryConfigs.breakpoints));
-
-export const MediaQueries = meta.story(tokenTypeStory(tokenTypeStoryConfigs.mediaQueries));
-
-/**
- * Reference page for design tokens and the generated theme `vars` contract.
- */
-export const Reference = meta.story({
-	play: async ({ canvas }) => {
-		await expectHeadingInStory(canvas, 'Tokens');
-		await expectHeadingInStory(canvas, 'CSS Variables');
-	},
-	render: () => <TokensVarsReference />,
-});
diff --git a/packages/@luke-ui/react/src/tokens/values.ts b/packages/@luke-ui/react/src/tokens/values.ts
deleted file mode 100644
index ca32f9a5..00000000
--- a/packages/@luke-ui/react/src/tokens/values.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { CubicBezierTokenValue, DimensionTokenValue, DurationTokenValue } from './index.js';
-
-/** Token values for responsive breakpoints. */
-export const breakpointValues = {
-	xsmall: { unit: 'px', value: 0 },
-	small: { unit: 'px', value: 640 },
-	medium: { unit: 'px', value: 768 },
-	large: { unit: 'px', value: 1024 },
-	xlarge: { unit: 'px', value: 1280 },
-	xxlarge: { unit: 'px', value: 1536 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for border radius. */
-export const borderRadiusValues = {
-	none: { unit: 'px', value: 0 },
-	small: { unit: 'px', value: 2 },
-	medium: { unit: 'px', value: 4 },
-	large: { unit: 'px', value: 8 },
-	xlarge: { unit: 'px', value: 16 },
-	full: { unit: 'px', value: 9999 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for border width. */
-export const borderWidthValues = {
-	thin: { unit: 'px', value: 1 },
-	thick: { unit: 'px', value: 2 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for box shadow. */
-export const boxShadowValues = {
-	none: 'none',
-	xsmall: '0px 1px 2px rgba(0, 0, 0, 0.2)',
-	small: '0px 2px 4px rgba(0, 0, 0, 0.2)',
-	medium: '0px 2px 8px rgba(0, 0, 0, 0.2)',
-	large: '0px 4px 16px rgba(0, 0, 0, 0.2)',
-	xlarge: '-8px 8px 32px rgba(0, 0, 0, 0.2)',
-} as const;
-
-/** Token values for control (interactive element) sizes. */
-export const controlSizeValues = {
-	small: { unit: 'px', value: 32 },
-	medium: { unit: 'px', value: 40 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for font family. */
-export const fontFamilyValues = {
-	sans: "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-	mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-} as const;
-
-/** Token values for font size. */
-export const fontSizeValues = {
-	xxsmall: { unit: 'px', value: 10 },
-	xsmall: { unit: 'px', value: 12 },
-	small: { unit: 'px', value: 14 },
-	standard: { unit: 'px', value: 16 },
-	medium: { unit: 'px', value: 20 },
-	large: { unit: 'px', value: 25 },
-	xlarge: { unit: 'px', value: 31 },
-	xxlarge: { unit: 'px', value: 39 },
-	h1: { unit: 'px', value: 39 },
-	h2: { unit: 'px', value: 31 },
-	h3: { unit: 'px', value: 25 },
-	h4: { unit: 'px', value: 20 },
-	h5: { unit: 'px', value: 16 },
-	h6: { unit: 'px', value: 14 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for font weight. */
-export const fontWeightValues = {
-	regular: 400,
-	medium: 500,
-	bold: 700,
-} as const;
-
-/** Token values for icon size. */
-export const iconSizeValues = {
-	xsmall: { unit: 'px', value: 16 },
-	small: { unit: 'px', value: 20 },
-	medium: { unit: 'px', value: 24 },
-	large: { unit: 'px', value: 32 },
-} as const satisfies Record<string, DimensionTokenValue>;
-
-/** Token values for line height. */
-export const lineHeightValues = {
-	nospace: 1,
-	tight: 1.25,
-	loose: 1.5,
-} as const;
-
-/** Token values for motion (animation) duration. */
-export const motionDurationValues = {
-	quick: { unit: 'ms', value: 120 },
-	fast: { unit: 'ms', value: 150 },
-	slow: { unit: 's', value: 1.2 },
-	slower: { unit: 's', value: 2 },
-} as const satisfies Record<string, DurationTokenValue>;
-
-/** Token values for motion easing curves. */
-export const motionEasingValues = {
-	emphasized: [0.42, 0, 0.58, 1],
-	exit: [0, 0, 0.58, 1],
-	linear: [0, 0, 1, 1],
-	standard: [0.4, 0, 0.2, 1],
-} as const satisfies Record<string, CubicBezierTokenValue>;
-
-/** Token values for spacing. */
-export const spaceValues = {
-	none: { unit: 'px', value: 0 },
-	xxsmall: { unit: 'px', value: 4 },
-	xsmall: { unit: 'px', value: 8 },
-	small: { unit: 'px', value: 12 },
-	medium: { unit: 'px', value: 16 },
-	large: { unit: 'px', value: 24 },
-	xlarge: { unit: 'px', value: 32 },
-	xxlarge: { unit: 'px', value: 40 },
-} as const satisfies Record<string, DimensionTokenValue>;
diff --git a/packages/@luke-ui/react/src/types/icon-size.ts b/packages/@luke-ui/react/src/types/icon-size.ts
new file mode 100644
index 00000000..5c1b6a50
--- /dev/null
+++ b/packages/@luke-ui/react/src/types/icon-size.ts
@@ -0,0 +1,2 @@
+/** Semantic icon-size steps shared by icon-sized components. */
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large';
diff --git a/packages/@luke-ui/react/src/types/prettify.ts b/packages/@luke-ui/react/src/types/prettify.ts
new file mode 100644
index 00000000..1f2318e4
--- /dev/null
+++ b/packages/@luke-ui/react/src/types/prettify.ts
@@ -0,0 +1,6 @@
+/**
+ * Expands an object type into a more readable representation.
+ */
+export type Prettify<T> = {
+	[K in keyof T]: T[K];
+};
diff --git a/packages/@luke-ui/react/src/types/public-props.test.ts b/packages/@luke-ui/react/src/types/public-props.test.ts
new file mode 100644
index 00000000..abb98ca7
--- /dev/null
+++ b/packages/@luke-ui/react/src/types/public-props.test.ts
@@ -0,0 +1,47 @@
+import { expectTypeOf, test } from 'vite-plus/test';
+import type { ButtonProps as PrimitiveButtonProps } from '../button/primitive/index.js';
+import type { LinkProps } from '../link/index.js';
+import type { TextProps } from '../text/index.js';
+import type { DistributiveOmit } from './distributive-omit.js';
+
+type ExampleUnion =
+	| { kind: 'button'; onPress: () => void; slot?: string }
+	| { href: string; kind: 'link'; slot?: string };
+
+const buttonProps = {
+	children: ({ isPending }) => (isPending ? 'Saving' : 'Save'),
+	className: ({ isPressed }) => (isPressed ? 'pressed' : 'resting'),
+	onPress: (event) => event.continuePropagation(),
+} satisfies PrimitiveButtonProps;
+
+const linkProps = {
+	children: 'Account',
+	className: ({ isHovered }) => (isHovered ? 'hovered' : 'resting'),
+	href: '/account',
+} satisfies LinkProps;
+
+const textProps = {
+	children: 'Account summary',
+	elementType: 'span',
+	id: 'account-summary-label',
+	onClick: () => undefined,
+} satisfies TextProps;
+
+// Type assertions are compile-time only.
+// oxlint-disable-next-line vitest/expect-expect
+test('preserves React Aria render props and native DOM props', () => {
+	expectTypeOf(buttonProps).toExtend<PrimitiveButtonProps>();
+	expectTypeOf(linkProps).toExtend<LinkProps>();
+	expectTypeOf(textProps).toExtend<TextProps>();
+});
+
+// Type assertions are compile-time only.
+// oxlint-disable-next-line vitest/expect-expect
+test('distributes over unions and rejects unknown omit keys', () => {
+	expectTypeOf<DistributiveOmit<ExampleUnion, 'slot'>>().toEqualTypeOf<
+		{ kind: 'button'; onPress: () => void } | { href: string; kind: 'link' }
+	>();
+
+	// @ts-expect-error Unknown keys must not silently pass through DistributiveOmit.
+	expectTypeOf<DistributiveOmit<ExampleUnion, 'missing'>>();
+});
diff --git a/packages/@luke-ui/react/vitest.config.ts b/packages/@luke-ui/react/vitest.config.ts
index ad57728f..d6c75842 100644
--- a/packages/@luke-ui/react/vitest.config.ts
+++ b/packages/@luke-ui/react/vitest.config.ts
@@ -78,11 +78,12 @@ export default defineConfig({
 						enabled: true,
 						expect: {
 							toMatchScreenshot: {
-								resolveScreenshotPath: ({ arg, ext, root }) =>
-									path.join(
+								resolveScreenshotPath: ({ arg, ext, root }) => {
+									return path.join(
 										process.env.VISUAL_CAPTURE_DIR ?? path.join(root, '.visual-captures'),
 										`${arg}${ext}`,
-									),
+									);
+								},
 								comparatorName: 'pixelmatch',
 								comparatorOptions: {
 									// Baselines are captured on the same OS/browser as CI, and
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 325bcbe3..35d18723 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,9 +111,6 @@ catalogs:
     babel-plugin-react-compiler:
       specifier: ^1.0.0
       version: 1.0.0
-    colorjs.io:
-      specifier: ^0.6.1
-      version: 0.6.1
     csstype:
       specifier: ^3.2.3
       version: 3.2.3
@@ -462,9 +459,6 @@ importers:
       babel-plugin-react-compiler:
         specifier: 'catalog:'
         version: 1.0.0
-      colorjs.io:
-        specifier: 'catalog:'
-        version: 0.6.1
       node-html-parser:
         specifier: 'catalog:'
         version: 8.0.4
@@ -4915,9 +4909,6 @@ packages:
     resolution: {integrity: sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==}
     engines: {node: '>=18'}
 
-  colorjs.io@0.6.1:
-    resolution: {integrity: sha512-8lyR2wHzuIykCpqHKgluGsqQi5iDm3/a2IgP2GBZrasn2sBRkE4NOGsglZxWLs/jZQoNkmA/KM/8NV16rLUdBg==}
-
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -12939,8 +12930,6 @@ snapshots:
       color-convert: 3.1.3
       color-string: 2.1.4
 
-  colorjs.io@0.6.1: {}
-
   comma-separated-tokens@2.0.3: {}
 
   commander@10.0.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1ffcff32..6a3bc5bd 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -81,7 +81,6 @@ catalog:
   '@vitest/coverage-v8': 4.1.9
   '@vitest/ui': 4.1.9
   babel-plugin-react-compiler: ^1.0.0
-  colorjs.io: ^0.6.1
   csstype: ^3.2.3
   eslint-plugin-react-hooks: ^7.1.1
   fumadocs-core: ^16.10.7
-- 
2.51.2