Appearance
Shortcuts
HCT Color Picker (Hue / Chroma / Tone number inputs)
| Key | Action |
|---|---|
| ↑ / ↓ | ±1 |
| Shift + ↑ / ↓ | ±10 |
| Alt/Option + ↑ / ↓ | ±0.1 |
Sliders support both drag and keyboard control:
- Drag: normal = snap to integers, Shift + drag = snap to 10s, Alt + drag = 0.1 precision
- Arrow keys on focused slider: ←→ / ↑↓ = ±0.1, Shift = ±10, Alt = ±0.01
- Focused slider shows a filled dot indicator; focused input shows a ring indicator
All number inputs use free-text editing with comma-to-dot replacement.
Theme Editor — StepInput (contrast factors, chroma factors, contrast steps)
| Key | Action |
|---|---|
| ↑ / ↓ | ±0.1 (±1 in APCA contrast model) |
| Shift + ↑ / ↓ | ±1 (±10 in APCA) |
| Alt/Option + ↑ / ↓ | ±0.01 (±0.1 in APCA) |
The step sizes scale by contrast model: WCAG-style fields use 0.1 / 1 / 0.01; APCA fields use 1 / 10 / 0.1 (Lc values run to the hundreds).
The level-count ("levels") field is not a StepInput — it uses a separate IntInput where ↑ / ↓ = ±1 only (integer-only, no Shift/Alt modifiers).
Hold arrows to repeat: the OS fires keydown at ~30 Hz, but StepInput requestAnimationFrame-coalesces commits into one store update per animation frame. Each queued tick compounds onto the last pending value rather than the visible input, so held arrows feel smooth even on heavy themes.
Theme Editor — Contrast Chips (entity contrast ratios)
| Key | Action |
|---|---|
| Click chip | Edit value inline |
| Enter | Confirm edit |
| Escape | Cancel edit |
| ↑ / ↓ | ±0.1 |
| Shift + ↑ / ↓ | ±1 |
| Alt/Option + ↑ / ↓ | ±0.01 |
+ icon (next to "Contrasts" label) | Add new contrast value (internal text button reads "+ Add value") |
× button | Remove chip |
Chip arrow steps are contrast-model dependent (like the StepInput section): WCAG = 0.1 / 1 / 0.01; APCA = 1 / 10 / 0.1.
Preview — Zoom Keyboard Shortcuts
| Key | Action |
|---|---|
⌥ + = / + | Zoom in 5% (anchored on cursor when hovering preview) |
⌥ + - | Zoom out 5% |
⇧ + ⌥ + = / - | Zoom ±10% |
⌥ + 0 | Reset zoom to 100% |
⌥⇧ + 0 | Enable Fit-to-viewport (zoom auto-recomputes on resize) |
| Trackpad pinch / ⌃ / ⌘ / ⌥ + wheel | Smooth zoom anchored on cursor (via @use-gesture/react) |
Zoom range is clamped to 25%–300%. The Fit mode disables itself the moment the user picks any explicit zoom (preset, ±, hotkey, pinch, wheel) so the user-typed value sticks; ⌥⇧0 turns it back on.
Preview — Zoom Buttons
A − button, a percent dropdown, and a + button sit in the preview filter bar.
| Control | Action |
|---|---|
− | Zoom out 5% |
+ | Zoom in 5% |
| Percent dropdown | Pick a preset (25 / 50 / 75 / 100 / 150 / 200 / 300%; 100% shows the ⌥0 hint) or Fit (last item, hint ⌥⇧0). Any non-preset zoom appears as an extra item in sorted order |
Drag & Drop
Available in: Palette (colors), Gradient Points, Interactions, Conditions, and Modes. Drag handle (⋮⋮) on the left; restricted to the vertical axis. Sorting is disabled when a list has only one item.
Window
| Action | Gesture |
|---|---|
| Resize window | Drag bottom-right corner handle (clamped to 960×720 minimum) |
| Default view | Click "Default view" in status bar (resets to 960×720 plus all view state) |
| Maximize | Double-click resize corner (expands to ~96% of viewport) |
Gamut Clamping
| Action | Gesture |
|---|---|
| Snap to max chroma | Click the clamped-values button (tooltip: "Clamped — click to snap to gamut") |
Global Hotkeys
| Key | Action |
|---|---|
| ⌥S | Save (with wave animation feedback) |
| ⌥P | Push Vars (opens confirmation dialog) |
| ⌥1 | Toggle editor footer panel |
| ⌥2 | Toggle preview footer panel (swatch info readout) |
| ⌥3 | Toggle agents footer panel (under chat) |
| ⌥` | Toggle AI chat open/closed |
| Esc | Close an open Theme Settings, Add Theme, Settings, or Edit with AI dialog (the Agent Dialog closes via its Close button / backdrop click, not Esc) |