logo
UI Elements
Design System
License
Changelog
github

Keyboard

Full mouseless parity. Direct-access key chords, roving tabIndex traversal, and tactile mechanical shortcuts giving power operators 10x execution velocity and unbroken flow across Elementa applications.

Mouseless Parity

Zero Pointer Latency

Direct Chords (⌘K)

Roving tabIndex

focus-visible Rings

Vim-Style Navigation

Mechanical Key Tester

Desk PDF Cheatsheets

UI & The Keyboard-First Advantage

The mouse is an exploratory pointing device; the keyboard is a surgical command instrument. Designing keyboard-first transforms software from a sluggish point-and-click chore into a seamless extension of muscle memory.
10× Execution Velocity

Moving a hand from the home row to the mouse, visually acquiring the cursor, targeting a 24px icon, and clicking consumes ~1,500ms. A keyboard chord takes under 200ms.

Target Acquisition: 200ms vs 1,500ms

Unbroken Mental Flow

Visual scanning for buttons forces an attention context-switch. Keyboard shortcuts trigger spinal muscle reflexes, keeping conscious working memory focused exclusively on deep work.

Zero Context Shifting

Ergonomic Longevity

Repetitive forearm rotation (pronation) and finger clawing on pointing devices cause chronic repetitive strain injuries (RSI). Home-row typing keeps wrists neutral.

Neutral Wrist Kinematics

Universal Accessibility

For users relying on screen readers, switch access, eye-tracking hardware, or motor assistance, the keyboard is not an optional luxury—it is the single point of entry.

WCAG 2.2 Level AA Mandate

The Ergonomic Compound Effect

How Much Time Does Keyboard-First Save You?

Every time you reach for the mouse to trigger a menu or select a record, you lose ~1.3 seconds compared to a keyboard sequence. Over an engineer or operator's working year, this compounds into entire work-weeks of recaptured flow.

Your Daily Interactive Actions:

120 actions/day

20 (Casual Browser)

250 (Active Operator)

500 (Power Developer)

Annual Time Recaptured

10.8

hrs

Equivalent to 1.4 full workdays rescued from mouse-hunting latency each year.

Calculated at 250 operational workdays

Two Complementary Paradigms: Shortcuts & Focus

A complete keyboard system requires both direct shortcuts (skipping hierarchy to trigger actions instantaneously) and sequential focus flow (navigating DOM trees logically with Tab, Shift+Tab, and roving arrow keys).

Shortcuts & Key Chords

Bypasses visual hierarchy completely. Executed via global modifier combinations (e.g., ⌘K, ⌘S) or sequential keystrokes (e.g., G then D).

Zero screen scanning required

Contextual single-key modes (J / K feeds)

Global command palette invoking

Primary Target: High-frequency operational tasks & navigation leaps.

Focus, Tab Sequences & Roving tabIndex

Systematic linear traversal through all interactive elements. Follows DOM reading order via Tab and ⇧ Tab, with arrow-key roving tabIndex handling composite widgets.

High-contrast visible focus rings (`focus-visible`)

Roving index: 1 Tab stop per composite toolbar

Modal focus trapping with Escape restoration

Primary Target: Accessible traversal, data entry forms & menus.

Interactive Focus Ring & Traversal Simulator

Step through the document tab order. Observe how the focus ring animates with precision and how composite tabs use roving tabIndex.

Stop 01 · tabIndex=0

Search clusters...

⌘K
Composite Widget · Roving Arrows

Active Target:

Search Field (⌘K)

Stop 1 of 5

focus-visible: active

Shortcuts Across Core Workflows

Shortcuts are categorized across four critical workflow domains. Each chord is ergonomically tested to prevent finger gymnastics while preserving universal operating system invariants.

Physical Keycap Tester & Chord Engine

Press any key on your keyboard right now (e.g., ⌘K, J, K, ⌘S, Esc) to test responsiveness.

Last Key: Waiting for Input

Esc
1
2
3
4
5
6
7
8
9
0
-
=
Delete
Tab
Q
W
E
R
T
Y
U
I
O
P
[
]
\
Caps
A
S
D
F
G
H
J
K
L
;
'
Enter
Shift
Z
X
C
V
B
N
M
,
.
/
Shift
Ctrl
Opt
Cmd
Space
Cmd
Opt
←
↑
↓
→
Action CommandOperational ScopeKey Sequence

Open Command Palette

Global launcher & search

⌘K

Focus Filter Field

Active table or data list

/

Go to Dashboard

Vim-style sequence leap

GD

Go to Settings

Vim-style sequence leap

GS

Shortcut Cheat Sheet

Contextual help overlay

?

UI Hints & Dedicated Desk Cheatsheets

Shortcuts only deliver speed if users discover them. We embed subtle, high-contrast <kbd> affordances natively into tooltips, menus, and form inputs, paired with printable desk reference guides.

Surface-Level UI Hint Affordances

Three standardized ways to expose shortcuts directly within application components.

Menu Item Right-Rail

Right-align shortcut chips in dropdown menus to teach hotkeys without visual noise.

Duplicate Workspace

⌘D

Export Telemetry

⇧⌘E

Never align shortcuts to the left

Tooltip Inset Badges

Pair button tooltips with explicit keyboard chords to encourage graduation from the mouse.

Hover Save Button

Save mutations

⌘S

Surfaces after 300ms hover delay

Contextual Pro-Tip Toast

When a user clicks a common button 3+ times via mouse, show an ephemeral pro-tip reminder.

Speed Pro-Tip

You can press ⌘Enter to submit instead of clicking.

Triggers on repetitive mouse usage

Dedicated Desk Reference Codex

Interactive keymap index with OS-native modifier tokens and exportable schema.

Official Reference Keymap · v1.80

Elementa Keyboard Command Codex (macOS)

Navigation & Search

Command Palette

⌘K

Quick Filter Field

/

Go to Dashboard

G then D

Show Cheatsheet Overlay

?

Authoring & Mutation

Commit & Save

⌘S

Fast Dispatch / Submit

⌘Enter

Undo Mutation

⌘Z

Redo Mutation

⇧⌘Z

Grid & List Traversal

Next Record / Row

J / ↓

Previous Record / Row

K / ↑

Toggle Checkbox Selection

X

Quick Peek / Preview

Space

Panels & Modals

Toggle Navigation Rail

⌘B

Split View Panel

⌘\

Dismiss / Unfocus / Cancel

Esc

Traverse Focus Sequence

Tab / ⇧Tab

Elementa Design System · Deriva Inc

Accessible Keyboard Parity Guaranteed