Superhuman

“We don’t just build an email client. We build an experience where speed is the product.”

Philosophy

Superhuman embodies a single obsession: speed as the core feature. Every design decision, from 50ms response times to keyboard-first navigation, serves this singular vision. The result is an email client that feels like an extension of thought rather than a tool you operate.

The founders applied game design principles to productivity software: story (you’re the hero conquering email), aesthetics (beautiful, minimal), mechanics (keyboard shortcuts as gameplay), and technology (relentless performance optimization).

Key Takeaways

50ms is the real target, not 100ms - Superhuman publicly claims 100ms as the threshold, but internally targets 50-60ms; the difference between “fast” and “feels like thought” is perceptible
Command palettes train users to graduate - Show keyboard shortcuts every time someone uses Cmd+K; after a few uses, muscle memory takes over and they stop needing the palette
Vim navigation patterns are proven - J/K for vertical, H/L for horizontal creates a spatial mental model that power users already know from decades of editor use
Onboarding is practice, not explanation - Superhuman’s 30-minute 1:1 sessions drill muscle memory with synthetic emails; users don’t watch demos, they develop habits
Optimistic UI is non-negotiable for speed - Actions complete visually before server confirmation; undo is the safety net, not loading spinners

Pattern Library

The 100ms Rule (Actually 50-60ms)

Superhuman’s famous “100ms rule” is actually more aggressive internally. Research shows perceived responsiveness degrades significantly above 100ms, so Superhuman targets 50-60ms for all interactions.

// Performance budget constants
const PERFORMANCE_TARGETS = {
  // Internal targets (what Superhuman actually aims for)
  keyRepeatRate: 65,        // ms - faster than macOS default (100ms)
  actionResponse: 50,       // ms - archive, send, move
  searchResults: 100,       // ms - first results appear
  composeOpen: 60,          // ms - new compose window

  // User perception thresholds (from research)
  instantaneous: 100,       // Feels instant
  responsive: 300,          // Still feels responsive
  noticeable: 1000,         // User notices delay
} as const;

// Optimistic UI pattern - action completes before server confirms
function archiveEmail(emailId: string) {
  // 1. Immediately update UI (0ms perceived)
  removeFromList(emailId);
  showUndoToast();

  // 2. Move focus to next email (keyboard flow uninterrupted)
  focusNextEmail();

  // 3. Server sync happens in background
  syncQueue.add({ action: 'archive', emailId });
}

Design insight: Key repeat rate is set to 65ms vs macOS default of 100ms. The faster rate makes holding j/k to scroll through emails noticeably faster.

Command Palette as Training Wheels

The Cmd+K command palette doubles as a training system that gradually teaches keyboard shortcuts.

interface CommandPaletteResult {
  action: string;
  shortcut?: string;
  description: string;
}

function CommandPalette({ query }: { query: string }) {
  const results = searchCommands(query);

  return (
    <div className="command-palette">
      {results.map(result => (
        <div className="command-row" key={result.action}>
          <span className="command-name">{result.action}</span>
          <span className="command-description">{result.description}</span>

          {/* The teaching moment: always show the shortcut */}
          {result.shortcut && (
            <kbd className="command-shortcut">{result.shortcut}</kbd>
          )}
        </div>
      ))}

      {/* Subtle reinforcement after selection */}
      <div className="palette-footer">
        Pro tip: Next time, try <kbd>{selectedResult?.shortcut}</kbd>
      </div>
    </div>
  );
}

// Usage tracking shows the training effect
const ONBOARDING_IMPACT = {
  shortcutUsage: '+20%',      // After 30-min onboarding
  reminderUsage: '+67%',      // Feature adoption
  week1Activation: '+17%',    // Retention metric
};

Design insight: Every time you use Cmd+K to find a command, you see its shortcut. After a few uses, muscle memory takes over and you stop using the palette for that action.

Split Inbox Architecture

Superhuman’s Split Inbox automatically categorizes emails into 3-7 focused streams, reducing cognitive load of a unified inbox.

interface InboxSplit {
  id: string;
  name: string;
  filter: EmailFilter;
  position: number;
  color: string;
}

const DEFAULT_SPLITS: InboxSplit[] = [
  {
    id: 'important',
    name: 'Important',
    filter: { from: 'vip-list', or: { hasReply: true } },
    position: 0,
    color: 'blue'
  },
  {
    id: 'team',
    name: 'Team',
    filter: { domain: 'company.com' },
    position: 1,
    color: 'green'
  },
  {
    id: 'calendar',
    name: 'Calendar',
    filter: { from: ['[email protected]'] },
    position: 2,
    color: 'purple'
  },
  {
    id: 'news',
    name: 'News & Updates',
    filter: { category: 'newsletter' },
    position: 3,
    color: 'orange'
  },
  {
    id: 'other',
    name: 'Other',
    filter: { default: true },
    position: 4,
    color: 'gray'
  }
];

// Navigation with H/L keys
function SplitNavigation({ splits, activeSplit, onSelect }) {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'h' || e.key === 'H') {
      // Previous split
      const prev = splits[Math.max(0, activeSplit - 1)];
      onSelect(prev);
    }
    if (e.key === 'l' || e.key === 'L') {
      // Next split
      const next = splits[Math.min(splits.length - 1, activeSplit + 1)];
      onSelect(next);
    }
  };

  return (
    <nav className="split-tabs">
      {splits.map((split, i) => (
        <button
          key={split.id}
          className={`split-tab ${i === activeSplit ? 'active' : ''}`}
          style={{ '--accent': split.color }}
        >
          {split.name}
          <span className="unread-count">{getUnreadCount(split)}</span>
        </button>
      ))}
    </nav>
  );
}

Design insight: Splits use vim-like H/L navigation (left/right) while J/K navigate within a split (up/down). The spatial model is consistent.

Keyboard-First Design

With 100+ keyboard shortcuts, Superhuman treats the keyboard as the primary input device.

// Core navigation shortcuts (vim-inspired)
const NAVIGATION_SHORTCUTS = {
  // Email list
  'j': 'next-email',
  'k': 'previous-email',
  'o': 'open-email',
  'u': 'go-back',

  // Split navigation
  'h': 'previous-split',
  'l': 'next-split',

  // Actions
  'e': 'archive',
  '#': 'trash',
  'r': 'reply',
  'a': 'reply-all',
  'f': 'forward',
  'c': 'compose',

  // Power features
  'Cmd+k': 'command-palette',
  'Cmd+/': 'shortcuts-help',
  '/': 'search',
  'z': 'undo',
};

// Visual feedback on every keypress
function KeypressIndicator({ lastKey }: { lastKey: string }) {
  return (
    <div className="keypress-toast" role="status">
      <kbd>{lastKey}</kbd>
      <span>{getActionName(lastKey)}</span>
    </div>
  );
}

// Zero-delay action feedback
function handleArchive() {
  // Haptic-like visual feedback
  animateEmailOut('slide-right', { duration: 150 });

  // Immediately focus next email
  focusNextEmail();

  // Show undo toast
  showToast({
    message: 'Archived',
    action: { label: 'Undo', shortcut: 'z' }
  });
}

Design insight: Actions have zero animation delay. Press E, email vanishes instantly. The animation is for visual closure, not a blocking operation.

White-Glove Onboarding

Superhuman’s famous 30-minute 1:1 onboarding sessions create muscle memory through practice, not explanation.

interface OnboardingSession {
  duration: '30-minutes';
  format: '1:1-video-call';
  structure: OnboardingPhase[];
}

const ONBOARDING_PHASES: OnboardingPhase[] = [
  {
    name: 'Synthetic Inbox',
    duration: '10-min',
    description: 'Practice with fake emails before touching real inbox',
    exercises: [
      'Archive 10 emails using E key',
      'Reply to 3 emails using R key',
      'Navigate using J/K keys',
      'Find a command with Cmd+K'
    ]
  },
  {
    name: 'Split Setup',
    duration: '10-min',
    description: 'Configure splits for their workflow',
    exercises: [
      'Create VIP split for important contacts',
      'Set up team split for work domain',
      'Navigate splits with H/L'
    ]
  },
  {
    name: 'Power Features',
    duration: '10-min',
    description: 'Introduce advanced features',
    exercises: [
      'Schedule send with Cmd+Shift+Enter',
      'Snooze email with H key',
      'Set reminder with Cmd+Shift+R'
    ]
  }
];

// Onboarding impact metrics
const ONBOARDING_RESULTS = {
  shortcutUsageIncrease: 0.20,    // +20%
  reminderFeatureAdoption: 0.67,  // +67%
  week1ActivationLift: 0.17,      // +17%
  npsScore: 70,                    // Industry-leading
};

Design insight: The synthetic inbox lets users build muscle memory with zero-stakes practice. By the time they touch real emails, the shortcuts are already becoming automatic.

Visual Design System

Typography: Messina Family

Superhuman uses the Messina font family from Luzi Type, a coordinated system of sans, serif, and monospace.

:root {
  /* Messina Sans - Primary UI */
  --font-sans: 'Messina Sans', -apple-system, sans-serif;

  /* Messina Serif - Email body, long-form */
  --font-serif: 'Messina Serif', Georgia, serif;

  /* Messina Mono - Code, timestamps, metadata */
  --font-mono: 'Messina Mono', 'SF Mono', monospace;

  /* Type scale - optimized for scanning */
  --text-xs: 11px;    /* Timestamps, metadata */
  --text-sm: 12px;    /* Secondary info */
  --text-base: 14px;  /* Primary UI text */
  --text-lg: 16px;    /* Email body */
  --text-xl: 18px;    /* Email subject */
}

/* Email list: optimized for rapid scanning */
.email-row {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.4;
}

.email-subject {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;  /* Tighter for headlines */
}

.email-sender {
  font-weight: 600;
  color: var(--text-primary);
}

.email-preview {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

Color System: Minimal Chrome

Superhuman uses color sparingly, primarily for status and focus, never for decoration.

:root {
  /* Neutral foundation */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;

  /* Text hierarchy */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;

  /* Accent: Blue for interactive, Purple for premium */
  --accent-primary: #0066ff;
  --accent-secondary: #7c3aed;

  /* Status colors */
  --status-unread: #0066ff;
  --status-starred: #f59e0b;
  --status-snoozed: #8b5cf6;

  /* Focus states - high contrast */
  --focus-ring: 0 0 0 2px var(--accent-primary);
}

/* Unread emails: subtle but clear distinction */
.email-row[data-unread="true"] {
  background: linear-gradient(
    to right,
    var(--accent-primary) 3px,
    var(--bg-primary) 3px
  );
}

.email-row[data-unread="true"] .email-sender {
  font-weight: 700;  /* Bolder for unread */
}

Animation Patterns

Instant Actions, Smooth Transitions

Actions complete instantly; animations provide visual closure without blocking.

/* Email archive: instant removal, smooth visual */
.email-row.archiving {
  animation: slide-out-right 150ms ease-out forwards;
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

/* Next email slides up to fill gap */
.email-row.moving-up {
  animation: slide-up 150ms ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(var(--row-height));
  }
  to {
    transform: translateY(0);
  }
}

/* Command palette: snappy spring */
.command-palette {
  animation: palette-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

Undo Toast Pattern

function UndoToast({ action, onUndo }: { action: string; onUndo: () => void }) {
  const [timeLeft, setTimeLeft] = useState(5);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(t => {
        if (t <= 1) {
          clearInterval(timer);
          return 0;
        }
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="undo-toast">
      <span>{action}</span>
      <button onClick={onUndo}>
        Undo <kbd>Z</kbd>
      </button>
      <div
        className="toast-timer"
        style={{ '--progress': timeLeft / 5 }}
      />
    </div>
  );
}

Lessons Learned

1. Speed Is a Feature

Performance isn’t a technical requirement—it’s the product. Every millisecond matters because responsiveness shapes the emotional experience of using software.

2. Command Palette as Progressive Training

Don’t just expose features through a command palette. Use it to teach shortcuts. Show the keyboard shortcut every time, and users will naturally graduate to direct invocation.

3. Keyboard-First Is Vim-Inspired

The j/k/h/l navigation pattern from vim provides a proven mental model for power users. Consistency with this convention reduces learning curve for developers and power users.

4. Onboarding Is Practice, Not Explanation

The 30-minute 1:1 sessions don’t explain features. They drill muscle memory. Users practice with synthetic data until shortcuts become automatic.

5. Optimistic UI Is Required for Speed

Waiting for server confirmation breaks the speed illusion. Actions must complete visually before the server responds, with undo as the safety net.

6. Splits Reduce Cognitive Load

A unified inbox forces constant context-switching. Pre-sorted splits let users enter different mental modes and batch-process similar emails.

Frequently Asked Questions

What is Superhuman’s “100ms rule” and why do they actually target 50ms?

Superhuman publicly promotes the 100ms rule—the threshold where interactions feel instant. However, internally they target 50-60ms for all actions. The difference between 50ms and 100ms is perceptible; 50ms feels like the interface responds before you’ve finished the action, while 100ms merely feels “fast.” This aggressive target comes from game design research on perceived responsiveness.

How does Superhuman’s command palette train users to use keyboard shortcuts?

Every time you use Cmd+K to find a command, the palette displays the keyboard shortcut next to it. This creates passive learning: you see the shortcut (e.g., “E” for archive) repeatedly without trying to memorize it. After a few uses, muscle memory forms and you naturally start pressing E directly instead of opening the palette. The palette essentially makes itself obsolete for power users.

Vim’s navigation pattern—J/K for up/down, H/L for left/right—creates a spatial mental model where your fingers rest on the home row. Millions of developers already know these keys from code editors. Superhuman extends this to email: J/K moves between emails in a list, H/L moves between inbox splits. The consistency means power users can navigate at thought-speed without looking at the keyboard.

What happens during Superhuman’s 30-minute onboarding sessions?

Onboarding specialists don’t explain features—they drill muscle memory. Users practice with a synthetic inbox of fake emails, archiving 10 emails with E, replying with R, and navigating with J/K. Only after shortcuts become semi-automatic do they touch their real inbox. This practice-first approach increases shortcut usage by 20% and feature adoption by 67% compared to self-guided onboarding.

How does Superhuman achieve instant-feeling actions with server synchronization?

Superhuman uses optimistic UI: when you press E to archive, the email immediately disappears and focus moves to the next message. The server sync happens in the background. If it fails (rare), the email reappears with an error. An undo toast with “Z” shortcut provides a safety net. This pattern means zero perceptible delay for the user, even though the actual operation takes hundreds of milliseconds to complete on the server.

References

Superhuman design philosophy presentations
Rahul Vohra (CEO) interviews on product design
Game design applied to productivity software
Performance optimization case studies
Onboarding impact metrics and user research

Superhuman: Speed as the Product