Layout-driven · 2011–present
Command Palette
A keyboard-driven floating overlay that surfaces every action, page, and setting from a single search input — navigation without menus.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(13% 0.012 268) - --fg
oklch(92% 0.005 265) - --muted
oklch(56% 0.012 265) - --surface
oklch(17% 0.014 268) - --surface-2
oklch(22% 0.014 268) - --border
oklch(28% 0.014 268) - --accent
oklch(63% 0.18 272) - --accent-fg
oklch(100% 0 0) - --focus
oklch(63% 0.18 272)
| Token | Value |
|---|---|
| --font-body | 'Inter', system-ui, sans-serif |
| --font-display | 'Inter', system-ui, sans-serif |
| --font-mono | ui-monospace, 'JetBrains Mono', monospace |
| --radius | 8px |
| --radius-sm | 6px |
| --shadow | 0 0 0 1px oklch(28% 0.014 268), 0 4px 16px oklch(0% 0 0 / 0.4) |
| --shadow-lg | 0 0 0 1px oklch(28% 0.014 268), 0 16px 48px oklch(0% 0 0 / 0.7) |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(13% 0.012 268);
--fg: oklch(92% 0.005 265);
--muted: oklch(56% 0.012 265);
--surface: oklch(17% 0.014 268);
--surface-2: oklch(22% 0.014 268);
--border: oklch(28% 0.014 268);
--accent: oklch(63% 0.18 272);
--accent-fg: oklch(100% 0 0);
--focus: oklch(63% 0.18 272);
--font-body: 'Inter', system-ui, sans-serif;
--font-display: 'Inter', system-ui, sans-serif;
--font-mono: ui-monospace, 'JetBrains Mono', monospace;
--radius: 8px;
--radius-sm: 6px;
--shadow: 0 0 0 1px oklch(28% 0.014 268), 0 4px 16px oklch(0% 0 0 / 0.4);
--shadow-lg: 0 0 0 1px oklch(28% 0.014 268), 0 16px 48px oklch(0% 0 0 / 0.7);
}Where it came from
Origin: Sublime Text Command Palette (2011); VS Code, Linear, Raycast
The command palette pattern was popularised by Sublime Text and spread to VS Code, then into product UIs via Linear, Notion, Figma, and Raycast. It replaces hierarchical menus with a single fuzzy-search field: type a fragment of what you want and the relevant actions surface. The design is deliberately minimal — a centred floating panel, a search input, a grouped list, nothing else.
How to spot it
- Centred floating overlay, triggered by a keyboard shortcut
- Single text input accepts all commands, navigation, and search
- Result list with keyboard-only navigation (arrow keys, Enter)
- Grouped results with category labels and keyboard shortcut hints on the right
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely fast for keyboard-first users — the fastest possible navigation | Invisible to new users who do not know the shortcut exists |
| Scales to any number of actions without adding visual clutter to the page | Requires comprehensive, discoverable, and consistent action labelling |
| Power-user favourite — Linear and Raycast built their brand around it | Does not fully replace navigation for mouse-first users |
In the wild
- Linear command menu (⌘K)
- VS Code Command Palette (⌘⇧P)
- Raycast application launcher
Use it when
Productivity tools and developer-facing apps where keyboard navigation and fast action discovery are the primary interactions.