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
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.
Search clusters...
⌘KActive 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
| Action Command | Operational Scope | Key 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
⌘DExport Telemetry
⇧⌘ENever 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
⌘SSurfaces 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
⌘KQuick Filter Field
/Go to Dashboard
G then DShow Cheatsheet Overlay
?Authoring & Mutation
Commit & Save
⌘SFast Dispatch / Submit
⌘EnterUndo Mutation
⌘ZRedo Mutation
⇧⌘ZGrid & List Traversal
Next Record / Row
J / ↓Previous Record / Row
K / ↑Toggle Checkbox Selection
XQuick Peek / Preview
SpacePanels & Modals
Toggle Navigation Rail
⌘BSplit View Panel
⌘\Dismiss / Unfocus / Cancel
EscTraverse Focus Sequence
Tab / ⇧TabElementa Design System · Deriva Inc
Accessible Keyboard Parity Guaranteed