Command Menu

A command palette opened with ⌘K. Distinct from the site search component ( /design/components/search) — a keyboard-driven palette for executing commands, navigating pages, and triggering actions. Composed of a search input, group labels, command rows (icon + label + kbd shortcut), active-row highlight, and an empty state.

Command Palette

Search input at the top with grouped result rows. The active row uses primary 10% tint + primary text (dark: sky). Keyboard shortcuts displayed with <kbd> on the right of each row. Panel radius --r-xl, shadow --sh-full.

Empty State

Shown when the query returns no results. Centers an icon and a brief message.

Esc
No results found.

Rules

  • Distinct from the site Search component — the search bar at /design/components/search is for content discovery, while the Command Menu is a keyboard palette for commands, actions, and navigation.
  • Trigger shortcut: ⌘K. Press Esc to close. role=dialog aria-modal required.
  • Panel radius --r-xl (16px), shadow --sh-full. Max width 440px.
  • Active row: primary 10% tint + primary text. Flips to sky tint + sky text in dark mode.
  • Group labels: 11px uppercase + letter-spacing 0.06em. Show the empty state UI when there are no results; keep the "no results" message concise.
  • kbd shortcuts use --r-sm (6px) + line token border. The line token adapts to dark mode automatically — no separate override needed.