diff --git a/.specs/command-menu.md b/.specs/command-menu.md
index 5b6c84141..ea136fbb5 100644
--- a/.specs/command-menu.md
+++ b/.specs/command-menu.md
@@ -4,9 +4,9 @@ category: overlay
 structure: composition
 status: implemented
 spec_version: 1
-checksum: 221223d1c35abb62344f3706d5d8b94c4a520275da4cb4de6d74575a80ae88ed
+checksum: 0f7a3717c0988f3e65db36a677f4eb0b0307d11854c10bc92e917d3e714918d3
 created: 2026-07-23
-last_updated: 2026-07-30
+last_updated: 2026-08-12
 ---
 
 # Command Menu — Component Spec
@@ -109,8 +109,8 @@ packages/webkit/src/components/overlay/command-menu/
   - Props: _none_.
   - Events: _none_.
   - Slots: `default` — one or more `<CommandMenu.Group>` / `<CommandMenu.Item>` / `<CommandMenu.Separator>`, plus an optional `<CommandMenu.Empty>`.
-- `command-menu-group/command-menu-group.vue` — labeled section. Renders an uppercase `heading` row above its items; hides itself entirely when all of its items are filtered out.
-  - Props: `heading: string` default `''` — uppercase section label; omit for an unlabeled group.
+- `command-menu-group/command-menu-group.vue` — labeled section. Renders a `heading` row (`text-label-sm` in `--text-muted`, sentence case) above its items; hides itself entirely when all of its items are filtered out. Carries `--spacing-sm` above itself when it follows another group, and deliberately **not** when it follows a `<CommandMenu.Separator>` — the separator owns the space around itself, so the two rules are mutually exclusive and never stack.
+  - Props: `heading: string` default `''` — section label; omit for an unlabeled group.
   - Events: _none_.
   - Slots: `default` — one or more `<CommandMenu.Item>`.
 - `command-menu-item/command-menu-item.vue` — a selectable command row. `role="option"`. Registers itself with the context (value + searchable text) so the root can filter and track the active item. Activated by click, `Enter` while active, or a full-row pointer; activation calls the context, which emits the root `select` and closes the palette. Shows an optional keyboard-shortcut hint rendered with `Kbd`.
@@ -120,6 +120,7 @@ packages/webkit/src/components/overlay/command-menu/
     - `shortcut: string` default `''` — a `'+'`-delimited shortcut hint (e.g. `'meta+d'`, `'meta+shift+p'`, `'esc'`) rendered on the right via `Kbd`. Modifier tokens (`meta`/`ctrl`/`shift`/`alt`) map to `Kbd` modifier props; the final token is the key. Display only — it does not register a global keybinding.
   - Events: _none_ (root emits `select`).
   - Slots: `default` — the item label (rich content allowed); `prefix` — leading icon/avatar; `suffix` — trailing content (mutually exclusive with `shortcut`).
+  - **One icon column for the whole list.** As soon as any item in the list carries a `prefix`, *every* item reserves the icon box — a fixed `size-4`, the same glyph size a `Menu` row uses — so a list that mixes iconed and icon-less items keeps a single label edge instead of a ragged one. A palette where no item has a `prefix` reserves nothing and pays no indent. The box is fixed-width so one item's oversized icon cannot widen the column and pull its own label out of line.
 - `command-menu-empty/command-menu-empty.vue` — the no-results state, shown only when the filter produces zero visible items. Fallback copy lives inside the slot.
   - Props: _none_.
   - Events: _none_.
@@ -175,17 +176,22 @@ The palette panel's open/close scale animation is owned by the wrapped `Dialog`
 | input header divider | `border-b border-(--border-default)` |
 | input field chrome (border / surface / text / focus ring) | inherited from `InputText` (`var(--border-default)`, `var(--bg-surface)`, `var(--text-default)`, `var(--ring-color)`) |
 | input placeholder / search icon | `var(--text-muted)` |
-| group heading typography | `.text-overline-sm` + `text-(--text-muted)` |
+| group heading typography | `.text-label-sm` + `text-(--text-muted)` |
 | item label typography | `.text-label-sm` + `text-(--text-default)` |
 | item shape | `var(--shape-button)` |
 | item min-height | `min-h-8` (32px) |
 | item spacing.x | `var(--spacing-sm)` |
 | item spacing.y | `var(--spacing-xxs)` |
 | item gap | `var(--spacing-xs)` |
+| item icon column | `size-4` (16px), reserved for every item when any item has a `prefix` |
+| list spacing.x / spacing.y | `var(--spacing-xxs)` / `var(--spacing-xs)` — the vertical seam is one step up from the row inset, matching the Dropdown panel |
 | item active surface | `var(--bg-selected)` |
 | item hover surface | `var(--bg-hover)` |
 | item disabled text | `var(--text-disabled)` |
 | separator | `border-t border-(--border-default)` |
+| separator spacing.above | `var(--spacing-sm)` |
+| separator spacing.below | `var(--spacing-xs)` |
+| group spacing (after another group) | `var(--spacing-sm)` |
 | empty-state text | `.text-label-sm` + `text-(--text-muted)` |
 | focus ring | `var(--ring-color)` |
 
@@ -210,7 +216,7 @@ _none_
 Composition component with no `kind`/`size` axis. Every story starts **closed** and ships its own opening affordance, matching the `dialog` story pattern: the panel teleports to `document.body`, so a story that forced `open` would stack its panel on top of every other story's panel on the Docs page (leaving each story canvas empty). Only `Default` keeps the global `shortcut`; the remaining stories pass `shortcut=""` so the Docs page has a single ⌘K owner.
 
 - Default — the intended entry point: a large read-only search `InputText` carrying a ⌘K `Kbd` hint that opens the palette via `v-model:open` (the global `meta+k` shortcut opens it too), containing one input, two groups, a separator, and items with and without `shortcut` hints. Covers the "Best practices" controlled `v-model:open` pattern alongside the default composition.
-- Grouped — composite story with two `<CommandMenu.Group>` separated by a `<CommandMenu.Separator>`. Required because grouping + separators are central anatomy not covered by `Default`.
+- Grouped — composite story with three `<CommandMenu.Group>`, only the first pair separated by a `<CommandMenu.Separator>`, and half the items carrying a `prefix` icon. Required because grouping + separators are central anatomy not covered by `Default`; the three-group shape shows both spacings (around a separator and between two bare groups) in one frame, and the mixed icons are the only coverage of the `prefix` slot and of the single label edge it guarantees.
 - WithShortcuts — items carrying `shortcut` hints rendered via `Kbd`. Required because the `shortcut` prop and its `Kbd` rendering are public Item API with no other coverage.
 - Empty — the palette with no matching items, showing the `<CommandMenu.Empty>` state. Required because the empty state is a distinct visual state (the `empty` state in the States table) with no other coverage.
 - Disabled — a group containing a disabled item alongside enabled ones. Required because `disabled` is public Item API and the disabled row is a distinct state.
diff --git a/apps/storybook/src/stories/components/overlay/command-menu/CommandMenu.stories.js b/apps/storybook/src/stories/components/overlay/command-menu/CommandMenu.stories.js
index e9b0b6e21..9e3087696 100644
--- a/apps/storybook/src/stories/components/overlay/command-menu/CommandMenu.stories.js
+++ b/apps/storybook/src/stories/components/overlay/command-menu/CommandMenu.stories.js
@@ -266,20 +266,37 @@ export const Default = {
 // The stories below opt out of the global binding (`shortcut=""`) so the Docs
 // page has a single ⌘K owner — the Default story above. One template const per
 // story renders the canvas AND builds the snippet, so the two cannot drift.
+// Three groups, only one separator — so the story shows both ways groups are
+// spaced (around a separator, and between two bare groups). Half the items carry
+// a `prefix` icon and half do not: the icon column is reserved for the whole
+// list, so every label starts on the same x either way.
 const GROUPED_TEMPLATE = `<Button label="Open grouped palette" kind="primary" @click="open = true" />
 
 <CommandMenu v-model:open="open" shortcut="">
   <CommandMenuInput placeholder="Search commands…" />
   <CommandMenuList>
     <CommandMenuGroup heading="Actions">
-      <CommandMenuItem value="deploy">Deploy Project</CommandMenuItem>
+      <CommandMenuItem value="deploy">
+        <template #prefix><i class="pi pi-cloud-upload" aria-hidden="true" /></template>
+        Deploy Project
+      </CommandMenuItem>
       <CommandMenuItem value="new-app">Create Application</CommandMenuItem>
     </CommandMenuGroup>
     <CommandMenuSeparator />
     <CommandMenuGroup heading="Navigation">
-      <CommandMenuItem value="settings">Go to Settings</CommandMenuItem>
+      <CommandMenuItem value="settings">
+        <template #prefix><i class="pi pi-cog" aria-hidden="true" /></template>
+        Go to Settings
+      </CommandMenuItem>
       <CommandMenuItem value="billing">Go to Billing</CommandMenuItem>
     </CommandMenuGroup>
+    <CommandMenuGroup heading="Account">
+      <CommandMenuItem value="profile">
+        <template #prefix><i class="pi pi-user" aria-hidden="true" /></template>
+        View Profile
+      </CommandMenuItem>
+      <CommandMenuItem value="logout">Log Out</CommandMenuItem>
+    </CommandMenuGroup>
   </CommandMenuList>
 </CommandMenu>`
 
@@ -297,7 +314,7 @@ export const Grouped = {
       controls: { disable: true },
       description: {
         story:
-          'Two labeled groups separated by a divider — the central grouping anatomy. Opens from a button; `shortcut=""` opts out of the global binding so only Default owns ⌘K on this page.'
+          'Three labeled groups — the central grouping anatomy — showing both spacings: `--spacing-sm` above a `CommandMenuSeparator` and `--spacing-xs` below it, and `--spacing-sm` between two groups with no separator between them. Half the items carry a `prefix` icon and half do not; because one item in the list has a prefix, every item reserves the icon column, so all the labels start on the same x. Opens from a button; `shortcut=""` opts out of the global binding so only Default owns ⌘K on this page.'
       },
       source: {
         code: toSfc(
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
index 287829a16..5c70dac10 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-group/command-menu-group.vue
@@ -14,7 +14,7 @@
 
   const props = withDefaults(
     defineProps<{
-      /** Uppercase section label rendered above the items. Omit for an unlabeled group. */
+      /** Section label rendered above the items. Omit for an unlabeled group. */
       heading?: string
     }>(),
     {
@@ -45,13 +45,19 @@
     role="group"
     :aria-labelledby="hasHeading ? headingId : undefined"
     :data-testid="testId"
-    class="flex flex-col"
+    class="flex flex-col [:not([role=separator])+&]:mt-(--spacing-sm)"
   >
+    <!--
+      Groups never sit flush. The rhythm is `--spacing-sm` above every group that
+      follows another group, and it deliberately does NOT apply after a
+      `<CommandMenu.Separator>` — the separator owns the space around itself, so
+      the two rules are mutually exclusive and cannot stack.
+    -->
     <div
       v-if="hasHeading"
       :id="headingId"
       :data-testid="`${testId}__heading`"
-      class="px-(--spacing-sm) py-(--spacing-xxs) text-overline-sm uppercase text-(--text-muted)"
+      class="px-(--spacing-sm) py-(--spacing-xxs) text-label-sm text-(--text-muted)"
     >
       {{ heading }}
     </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
index 8868317c8..bc50e5421 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-item/command-menu-item.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { computed, inject, onBeforeUnmount, onMounted, ref, toRef, useAttrs } from 'vue'
+  import { computed, inject, onBeforeUnmount, onMounted, ref, toRef, useAttrs, useSlots } from 'vue'
 
   import Kbd from '../../../content/kbd/kbd.vue'
   import {
@@ -35,9 +35,12 @@
   )
 
   const attrs = useAttrs()
+  const slots = useSlots()
   const ctx = useCommandMenuContext()
   const groupId = inject(CommandMenuGroupIdKey, null)
 
+  const hasPrefix = computed(() => Boolean(slots['prefix']))
+
   const labelRef = ref<HTMLElement | null>(null)
   const itemText = ref(String(props.value))
 
@@ -83,6 +86,7 @@
       groupId,
       disabled: disabledRef,
       isVisible,
+      hasPrefix,
       activate
     })
   })
@@ -109,9 +113,16 @@
     @keydown.space.prevent="!disabled && activate($event)"
     @mouseenter="!disabled && ctx.setActive(value)"
   >
+    <!--
+      Rendered for every item once ANY item in the list carries a prefix, so the
+      icon column is reserved and all labels start on the same x. The box is a
+      fixed `size-4` — the same glyph size Menu rows use — so an item's own icon
+      cannot widen the column and push its label out of line with the others.
+    -->
     <span
-      v-if="$slots['prefix']"
-      class="flex shrink-0 items-center"
+      v-if="ctx.hasPrefixColumn.value"
+      :data-testid="`${testId}__prefix`"
+      class="flex size-4 shrink-0 items-center justify-center overflow-hidden"
     >
       <slot name="prefix" />
     </span>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
index 05bdb658b..b7c638469 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-list/command-menu-list.vue
@@ -26,7 +26,7 @@
     :id="ctx.listId"
     role="listbox"
     :data-testid="testId"
-    class="max-h-[24rem] overflow-y-auto p-(--spacing-xxs)"
+    class="max-h-[24rem] overflow-y-auto px-(--spacing-xxs) py-(--spacing-xs)"
   >
     <slot />
   </div>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue b/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
index 62303baf3..4904398ea 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu-separator/command-menu-separator.vue
@@ -22,6 +22,6 @@
     role="separator"
     aria-hidden="true"
     :data-testid="testId"
-    class="my-(--spacing-xxs) border-t border-(--border-default)"
+    class="mt-(--spacing-sm) mb-(--spacing-xs) border-t border-(--border-default)"
   />
 </template>
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu.test.ts b/packages/webkit/src/components/overlay/command-menu/command-menu.test.ts
index 45f3f0d3a..fbe2120ae 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu.test.ts
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu.test.ts
@@ -62,6 +62,39 @@ const composed = (props: Record<string, unknown> = {}, inputProps: Record<string
     `
   })
 
+/**
+ * A palette whose first item carries a `prefix` and whose second does not — the
+ * mixed case the reserved icon column exists for.
+ */
+const mixedPrefixes = () =>
+  defineComponent({
+    components: {
+      CommandMenu,
+      CommandMenuInput,
+      CommandMenuList,
+      CommandMenuGroup,
+      CommandMenuItem
+    },
+    setup() {
+      const open = ref(true)
+      return { open }
+    },
+    template: `
+      <CommandMenu v-model:open="open">
+        <CommandMenuInput placeholder="Search commands…" />
+        <CommandMenuList>
+          <CommandMenuGroup heading="Actions">
+            <CommandMenuItem value="deploy">
+              <template #prefix><i class="pi pi-cloud-upload" aria-hidden="true" /></template>
+              Deploy Project
+            </CommandMenuItem>
+            <CommandMenuItem value="new-app">Create Application</CommandMenuItem>
+          </CommandMenuGroup>
+        </CommandMenuList>
+      </CommandMenu>
+    `
+  })
+
 afterEach(async () => {
   await settle()
 })
@@ -205,6 +238,81 @@ describe('CommandMenu (overlay: wraps Dialog, composition + provide/inject)', ()
     })
   })
 
+  // Vitest browser mode compiles no Tailwind, so an emitted `px` cannot be
+  // measured here. These assert the structural mechanism instead: the reserved
+  // box either exists on every row or on none, which is what makes the label
+  // edge single. Geometry is verified in the browser against the story.
+  describe('one icon column for the whole list', () => {
+    it('reserves the prefix box on every item once any item carries a prefix', async () => {
+      render(mixedPrefixes())
+      await settle()
+
+      const items = Array.from(
+        document.body.querySelectorAll<HTMLElement>('[data-testid="overlay-command-menu__item"]')
+      )
+      expect(items).toHaveLength(2)
+
+      // Both rows get the box — the icon-less one reserves an empty column so its
+      // label starts where the iconed row's does.
+      for (const item of items) {
+        const box = item.querySelector('[data-testid="overlay-command-menu__item__prefix"]')
+        expect(box).not.toBeNull()
+        expect(box?.className).toContain('size-4')
+      }
+
+      // Only the first actually holds a glyph.
+      expect(items[0].querySelector('i.pi-cloud-upload')).not.toBeNull()
+      expect(items[1].querySelector('i')).toBeNull()
+    })
+
+    it('reserves no column when no item carries a prefix', async () => {
+      render(composed({ defaultOpen: true }))
+      await settle()
+
+      const items = Array.from(
+        document.body.querySelectorAll<HTMLElement>('[data-testid="overlay-command-menu__item"]')
+      )
+      expect(items.length).toBeGreaterThan(0)
+      for (const item of items) {
+        expect(item.querySelector('[data-testid="overlay-command-menu__item__prefix"]')).toBeNull()
+      }
+    })
+  })
+
+  describe('group rhythm', () => {
+    it('spaces a group that follows another group, but not one that follows a separator', async () => {
+      render(composed({ defaultOpen: true }))
+      await settle()
+
+      const groups = Array.from(
+        document.body.querySelectorAll<HTMLElement>('[data-testid="overlay-command-menu__group"]')
+      )
+      expect(groups).toHaveLength(2)
+
+      // The variant is sibling-scoped, so both groups carry the same class and the
+      // selector decides: it matches after a group, never after a separator.
+      for (const group of groups) {
+        expect(group.className).toContain('[:not([role=separator])+&]:mt-(--spacing-sm)')
+      }
+
+      // Group 2 here follows the separator, so the rule must not match it.
+      expect(groups[1].previousElementSibling?.getAttribute('role')).toBe('separator')
+    })
+
+    it('gives the separator the same rhythm as the Dropdown group divider', async () => {
+      render(composed({ defaultOpen: true }))
+      await settle()
+
+      const separator = document.body.querySelector<HTMLElement>(
+        '[data-testid="overlay-command-menu__separator"]'
+      )
+      expect(separator).not.toBeNull()
+      expect(separator?.className).toContain('mt-(--spacing-sm)')
+      expect(separator?.className).toContain('mb-(--spacing-xs)')
+      expect(separator?.className).toContain('border-t')
+    })
+  })
+
   describe('accessibility (axe on the open, Teleported palette)', () => {
     it('has no WCAG violations while open', async () => {
       render(composed({ defaultOpen: true }))
diff --git a/packages/webkit/src/components/overlay/command-menu/command-menu.vue b/packages/webkit/src/components/overlay/command-menu/command-menu.vue
index 689c8d034..a3e5887a6 100644
--- a/packages/webkit/src/components/overlay/command-menu/command-menu.vue
+++ b/packages/webkit/src/components/overlay/command-menu/command-menu.vue
@@ -87,6 +87,14 @@
 
   const hasVisibleItems = computed(() => items.value.some((item) => item.isVisible.value))
 
+  /**
+   * One icon column for the whole palette. Reserved as soon as a single item
+   * carries a `prefix`, so a list that mixes iconed and icon-less items keeps one
+   * label edge instead of a ragged one — and a palette with no icons at all pays
+   * no indent.
+   */
+  const hasPrefixColumn = computed(() => items.value.some((item) => item.hasPrefix.value))
+
   function setOpen(value: boolean) {
     isOpen.set(value)
   }
@@ -232,6 +240,7 @@
     setActive,
     isActive,
     hasVisibleItems,
+    hasPrefixColumn,
     groupHasVisibleItems,
     onInputKeydown
   })
diff --git a/packages/webkit/src/components/overlay/command-menu/injection-key.ts b/packages/webkit/src/components/overlay/command-menu/injection-key.ts
index fbff6127a..be271b164 100644
--- a/packages/webkit/src/components/overlay/command-menu/injection-key.ts
+++ b/packages/webkit/src/components/overlay/command-menu/injection-key.ts
@@ -13,6 +13,8 @@ export interface CommandMenuRegisteredItem {
   disabled: Ref<boolean>
   /** Whether the item currently passes the substring filter. */
   isVisible: Ref<boolean>
+  /** Whether the item renders leading `prefix` content. */
+  hasPrefix: Ref<boolean>
   /** Activates the item, emitting the root `select` event. */
   activate: (event: globalThis.MouseEvent | globalThis.KeyboardEvent) => void
 }
@@ -45,6 +47,11 @@ export interface CommandMenuContext {
   isActive: (value: CommandMenuItemValue) => boolean
   /** Whether any registered item currently passes the filter. */
   hasVisibleItems: Ref<boolean>
+  /**
+   * Whether any registered item renders a `prefix`. When true every item reserves
+   * the icon column, so labels share one x whether or not that item has an icon.
+   */
+  hasPrefixColumn: Ref<boolean>
   /** Whether the given group has at least one visible item. */
   groupHasVisibleItems: (groupId: string) => boolean
   /** Keyboard handler for the input — Arrow/Home/End roving nav + Enter activation. */