Patterns
Interaction States
Every interactive component must define all 8 states. Apply these rules at the component level — not per screen. Color is never the only state indicator.
8-State component model
Pair each state with a non-color indicator: border, fill, icon, or text weight. Disabled components stay in the layout; never collapse or hide them.
Default
Resting state
Hover
Confirm interactivity
Active
Click in progress
Selected
Chosen / current
Focus
Keyboard nav
Disabled
Keep in layout
Loading
Async in progress
Error
Validation / failure
Action consequence model
One high-consequence action should be visually primary per surface. Destructive actions use semantic red — never the theme accent color.
Filter, inspect, preview, copy
Immediate — no confirmation needed.
Test run, draft save, validate
Immediate — but undo should be available.
Publish, delete, revoke, run in production
Requires confirmation. Clear post-action state.
Progressive disclosure
Primary sidebar
Global destinations
Secondary sidebar
Object-level routes
Toolbar
Object actions
Panels
Advanced options
Each level adds specificity. Never surface rare configuration in primary navigation.
Additional rules
Density modes
Focus & keyboard
- Rings visible on all backgrounds
- Tab: sidebar → subnav → toolbar → canvas
- Icon-only: aria-label + tooltip
- Disabled: maintain size, never hide