Keyboard

A <kbd> keycap for displaying keyboard shortcuts. Uses the line token with a 2px bottom border only, giving a subtle raised look. Latin/symbol font (--ff-en), radius 6px (--r-sm).

Single Key

A single key uses one .kbd element.

⌘EscEnterShift↑↓

Combo Key

Combinations place a muted + between keycaps.

⌘+KShift+Enter⌘+⇧+P

Rules

  • Use only to label shortcuts in instructional body text — never decorative.
  • Latin characters and symbols use --ff-en; localized key names (e.g. language-toggle keys) fall back to the body font.
  • Color and border follow the line token automatically — no dark mode overrides needed.