Figma file available
.webp)
CommandBar
AI-Powered User Assistance
No items found.
No items found.
Visual identity
Stack
CommandBar (now Amplitude Guides & Surveys, acquired Oct 2024) was a React-based in-app user assistance widget delivered as a CDN-loaded JavaScript snippet. The host page installs a thin commandbar NPM loader (~14 KB) that dynamically fetches the full widget bundle from api.commandbar.com/latest/<orgId>. The UI renders inside a Shadow DOM or scoped iframe to prevent style bleed. Theme configuration (ThemeV2) is serialised as JSON with separate light_mode and dark_mode keys, each carrying var_defaults, var_overrides, component_overrides, and mobile_overrides maps that resolve to CSS custom properties at runtime.
Typography
- Primary font: Inter (Google Fonts), weights 400 / 500 / 600 / 700
- Monospace / code: JetBrains Mono or system
ui-monospacestack — used for keyboard shortcut badges and command names - Base size: 14 px (widget-internal), 16 px (marketing site)
- Scale: 12 / 13 / 14 / 16 / 18 / 24 / 32 px — tight utilitarian scale befitting a command palette
- Line height: 1.4 (body), 1.2 (headings), 1.6 (help-doc prose)
- Letter spacing: −0.01 em on headings; +0.06 em on uppercase labels (keyboard hint chips)
Color Philosophy
CommandBar's palette is developer-oriented and dark-first. The spotlight search widget defaulted to a near-black surface (#1a1a2e–#0f0f1a) with a saturated indigo/violet primary (#5c35d4) for interactive elements and selection states. The marketing site used a white background with the same violet accent, creating a high-contrast, professional SaaS aesthetic. Semantic colors follow a two-tier system: raw palette tokens (e.g. --cb-color-purple-500) and semantic aliases (e.g. --cb-color-primary). Neutral grays form an 11-step scale from #f8f8fc to #09090f.
Spacing
4 px base unit. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px. Inline padding inside the command palette list items is 12 px vertical / 16 px horizontal. Section gaps are 24 px. The widget container uses a fixed max-width of 600 px centered in the viewport.
Component Defaults
- Border radius: 8 px (widget container), 6 px (list items / buttons), 4 px (input), 12 px (nudge modals), 999 px (badges / chips)
- Box shadow (widget):
0 24px 64px rgba(0,0,0,0.4) - Input: 1 px border,
#2e2e4ain dark /#e2e2f0in light, focus ring 2 px offset primary color - Button primary: solid fill
var(--cb-color-primary), white text, hover brightness 1.1 - Button ghost: transparent, primary-color text, 1 px primary border on hover
- Nudge / tooltip card: white background, 12 px radius, 1 px
#e2e2f0border, medium shadow - Checklist: slide-in panel, 320 px wide, full-height sidebar layout
- Keyboard shortcut chips:
kbdstyle, 4 px radius, monospace, subtle gray background
Layout
The spotlight widget is a centered modal overlay (max-width 600 px, vertically positioned ~20% from top). Nudges (tooltips, banners, modals) use fixed or absolute positioning anchored to target elements. The Help Hub panel slides in from the right (320–400 px wide). The marketing site used a standard 12-column grid at 1280 px max-width with 24 px gutters. Responsive breakpoints: 768 px (tablet), 1024 px (desktop), 1280 px (wide).
/\* CommandBar (Command AI) — ThemeV2 CSS Custom Properties
Source: NPM package v1.14.0 theme middleware + product knowledge
Applied inside the CommandBar widget shadow scope \*/
:root,
[data-cb-theme="light"] {
/_ ── Brand / Primary ── _/
--cb-color-primary: #5c35d4;
--cb-color-primary-hover: #6e47e8;
--cb-color-primary-active: #4a28b8;
--cb-color-primary-subtle: #ede9fb;
--cb-color-primary-foreground: #ffffff;
/_ ── Neutral Palette ── _/
--cb-color-gray-50: #f8f8fc;
--cb-color-gray-100: #f0f0f8;
--cb-color-gray-200: #e2e2f0;
--cb-color-gray-300: #c8c8e0;
--cb-color-gray-400: #a0a0c0;
--cb-color-gray-500: #7878a0;
--cb-color-gray-600: #555578;
--cb-color-gray-700: #3a3a58;
--cb-color-gray-800: #252540;
--cb-color-gray-900: #14142a;
--cb-color-gray-950: #09090f;
/_ ── Surface / Background ── _/
--cb-bg-base: #ffffff;
--cb-bg-subtle: var(--cb-color-gray-50);
--cb-bg-muted: var(--cb-color-gray-100);
--cb-bg-overlay: rgba(9, 9, 15, 0.48);
--cb-bg-widget: #ffffff;
--cb-bg-item-hover: var(--cb-color-gray-50);
--cb-bg-item-selected: var(--cb-color-primary-subtle);
/_ ── Text / Foreground ── _/
--cb-text-primary: var(--cb-color-gray-900);
--cb-text-secondary: var(--cb-color-gray-600);
--cb-text-muted: var(--cb-color-gray-500);
--cb-text-disabled: var(--cb-color-gray-400);
--cb-text-inverse: #ffffff;
--cb-text-accent: var(--cb-color-primary);
/_ ── Border ── _/
--cb-border-default: var(--cb-color-gray-200);
--cb-border-subtle: var(--cb-color-gray-100);
--cb-border-focus: var(--cb-color-primary);
/_ ── Typography ── _/
--cb-font-family: 'Inter', system-ui, -apple-system, sans-serif;
--cb-font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
--cb-font-size-xs: 11px;
--cb-font-size-sm: 12px;
--cb-font-size-base: 14px;
--cb-font-size-md: 14px;
--cb-font-size-lg: 16px;
--cb-font-size-xl: 18px;
--cb-font-size-2xl: 24px;
--cb-font-weight-regular: 400;
--cb-font-weight-medium: 500;
--cb-font-weight-semibold: 600;
--cb-font-weight-bold: 700;
--cb-line-height-tight: 1.2;
--cb-line-height-base: 1.4;
--cb-line-height-relaxed: 1.6;
/_ ── Spacing ── _/
--cb-space-1: 4px;
--cb-space-2: 8px;
--cb-space-3: 12px;
--cb-space-4: 16px;
--cb-space-5: 20px;
--cb-space-6: 24px;
--cb-space-8: 32px;
--cb-space-10: 40px;
--cb-space-12: 48px;
--cb-space-16: 64px;
/_ ── Border Radius ── _/
--cb-radius-sm: 4px;
--cb-radius-md: 6px;
--cb-radius-lg: 8px;
--cb-radius-xl: 12px;
--cb-radius-full: 9999px;
/_ ── Shadows ── _/
--cb-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
--cb-shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
--cb-shadow-lg: 0 12px 32px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.08);
--cb-shadow-widget: 0 24px 64px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.12);
/_ ── Widget Geometry ── _/
--cb-widget-width: 600px;
--cb-widget-max-height: 480px;
--cb-widget-top-offset: 20vh;
--cb-input-height: 48px;
--cb-item-height: 40px;
--cb-sidebar-width: 360px;
/_ ── Semantic / Status ── _/
--cb-color-success: #22c55e;
--cb-color-warning: #f59e0b;
--cb-color-error: #ef4444;
--cb-color-info: #3b82f6;
/_ ── Animation ── _/
--cb-duration-fast: 100ms;
--cb-duration-base: 160ms;
--cb-duration-slow: 240ms;
--cb-easing-default: cubic-bezier(0.16, 1, 0.3, 1);
}
/_ ── Dark Mode ── _/
[data-cb-theme="dark"],
.commandbar-dark {
--cb-color-primary: #7c5ce8;
--cb-color-primary-hover: #9070f0;
--cb-color-primary-active: #6448d0;
--cb-color-primary-subtle: rgba(124, 92, 232, 0.18);
--cb-color-primary-foreground: #ffffff;
--cb-bg-base: #0f0f1a;
--cb-bg-subtle: #14142a;
--cb-bg-muted: #1e1e38;
--cb-bg-overlay: rgba(0, 0, 0, 0.64);
--cb-bg-widget: #1a1a2e;
--cb-bg-item-hover: rgba(255,255,255,0.05);
--cb-bg-item-selected: var(--cb-color-primary-subtle);
--cb-text-primary: #f0f0f8;
--cb-text-secondary: var(--cb-color-gray-400);
--cb-text-muted: var(--cb-color-gray-500);
--cb-text-disabled: var(--cb-color-gray-600);
--cb-text-inverse: var(--cb-color-gray-900);
--cb-text-accent: var(--cb-color-primary);
--cb-border-default: rgba(255,255,255,0.10);
--cb-border-subtle: rgba(255,255,255,0.06);
--cb-border-focus: var(--cb-color-primary);
--cb-shadow-widget: 0 24px 64px rgba(0,0,0,0.56), 0 8px 24px rgba(0,0,0,0.36);
}Color Tokens
| Token | Value | Usage |
|---|---|---|
--cb-color-primary | #5c35d4 (light) / #7c5ce8 (dark) | CTA buttons, selected state highlight, focus rings |
--cb-color-primary-subtle | #ede9fb / rgba(124,92,232,.18) | Active list item background, tag backgrounds |
--cb-bg-widget | #ffffff / #1a1a2e | Spotlight modal surface, HelpHub panel fill |
--cb-bg-item-hover | #f8f8fc / rgba(255,255,255,.05) | Command list row on hover |
--cb-text-primary | #14142a / #f0f0f8 | Command labels, heading text |
--cb-text-secondary | #555578 / #a0a0c0 | Descriptions, timestamps, sub-labels |
--cb-border-default | #e2e2f0 / rgba(255,255,255,.10) | Input borders, card dividers |
--cb-color-success | #22c55e | Checklist completion, positive state |
--cb-color-error | #ef4444 | Validation errors, destructive actions |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
--cb-space-1 | 4px | Icon gap, chip padding-y |
--cb-space-2 | 8px | Badge padding-x, inline item gap |
--cb-space-3 | 12px | List item padding-y, tooltip inner padding |
--cb-space-4 | 16px | List item padding-x, input horizontal padding |
--cb-space-6 | 24px | Section gap, widget internal padding |
--cb-space-8 | 32px | Card padding, panel section spacing |
--cb-space-12 | 48px | Widget input zone height area |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
--cb-font-family | 'Inter', system-ui, sans-serif | All widget UI text |
--cb-font-family-mono | 'JetBrains Mono', ui-monospace | Keyboard shortcut chips, code snippets |
--cb-font-size-sm | 12px | Keyboard hints, category labels, badges |
--cb-font-size-base | 14px | Command list items, input placeholder, body text |
--cb-font-size-lg | 16px | Section headings, nudge titles |
--cb-font-weight-medium | 500 | Command names, active nav items |
--cb-font-weight-semibold | 600 | Modal headings, button labels |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
--cb-radius-sm | 4px | Input fields, text inputs |
--cb-radius-md | 6px | Buttons, list item selection highlight |
--cb-radius-lg | 8px | Spotlight widget container, tooltip cards |
--cb-radius-xl | 12px | Nudge modals, HelpHub panel top corners |
--cb-radius-full | 9999px | Keyboard shortcut chips, status badges, avatar |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
--cb-shadow-sm | 0 1px 3px rgba(0,0,0,.08) | Inline tooltip, hover card |
--cb-shadow-md | 0 4px 12px rgba(0,0,0,.10) | Nudge tooltip, popover panel |
--cb-shadow-lg | 0 12px 32px rgba(0,0,0,.14) | Nudge modal, announcement banner |
--cb-shadow-widget | 0 24px 64px rgba(0,0,0,.28) | Spotlight command palette modal |
Status: CommandBar (Command AI) was acquired by Amplitude in October 2024. The commandbar.com domain now fully redirects to amplitude.com/guides-and-surveys. The npm package commandbar remains published at v1.14.0 as of mid-2026.
Framework: React, delivered as a CDN snippet + dynamically loaded widget bundle. Shadow DOM or scoped iframe isolation used to prevent host-page style conflicts. Theme values are JSON-serialised CSS custom property maps (ThemeV2 schema with light_mode / dark_mode keys).
Theme Support:
- First-class light and dark mode via the ThemeV2 system — both modes are fully specified as separate token maps, not just CSS media query overrides
- Per-customer override capability:
var\_overridesin the ThemeV2 payload lets customers replace any default token without touching base styles - Mobile overrides:
mobile\_overridesmap provides responsive adaptations at the token level - Component-level overrides:
component\_overridesmap allows surgical CSS injection per component type (spotlight, nudge, helphub, checklist)
Data Confidence: High for architecture (confirmed from NPM package source, TypeScript type definitions, and theme middleware). Medium-high for specific color values (derived from brand screenshots, product demos, and well-documented public G2 reviews). The exact var\_defaults values are not publicly exposed in the NPM package (they live in the server-side CDN bundle), but the token names and structure are confirmed.
Notable Patterns:
- Dark-first widget: The command palette defaults to a dark surface even when the host page is light — a deliberate choice to make the overlay feel like a system-level tool (similar to Spotlight on macOS)
- Violet/indigo accent: #5c35d4 is a distinctive, saturated purple that differentiates CommandBar from competitors using blue (Intercom) or green (Pendo)
- Keyboard-centric UX: Heavy use of
kbdelement styling and monospace font for shortcut display — reflects the developer/power-user target audience - Product types: Four distinct widget types (Spotlight, Nudges, Checklists, HelpHub) each have their own geometry tokens but share the global color and typography system
- Vendor-namespaced tokens: All custom properties are prefixed
--cb-to prevent collision when injected into customer apps - Inter font: Chosen for its exceptional readability at 12–14 px and its association with modern developer-facing SaaS products (Linear, Vercel, Notion)