01
Protect the semantic contract
Start by naming the behavior that must survive the visual change.
- Keep the accessible name connected to the control.
- Preserve hint and error relationships with aria-describedby.
- Do not replace native disabled behavior with color alone.
- Keep focus order aligned with the visual reading order.
02
Move style changes into tokens
Token changes preserve one behavior implementation while letting the surface fit your product.
tokens.css
.theme-aurora {
--aurora-primary: #246bfd;
--aurora-ring: #246bfd;
--aurora-radius: 0.75rem;
}Keep focus contrast and state distinction visible after changing brand colors. A token is a shared decision, so check every component that consumes it rather than only the example in front of you.
03
Replay real states
Rest, hover, and a single happy-path screenshot are not enough evidence.
Verify keyboard focus, pointer hover, invalid input, disabled controls, loading, long text, and reduced motion. Run the same checks on mobile where labels wrap and helper text changes the vertical rhythm.
Guide complete
Keep the proof with the change.
Record the commands you ran, the states you checked, and the evidence that remains outside this guide.
Put it into practice