CommandBar UX/UI Design and Copywrinting Examples

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-monospace stack — 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, #2e2e4a in dark / #e2e2f0 in 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 #e2e2f0 border, medium shadow
Checklist: slide-in panel, 320 px wide, full-height sidebar layout
Keyboard shortcut chips: kbd style, 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\_overrides in the ThemeV2 payload lets customers replace any default token without touching base styles
Mobile overrides: mobile\_overrides map provides responsive adaptations at the token level
Component-level overrides: component\_overrides map 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 kbd element 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)