Practical color guide
Color in interface design
Use color correctly for hierarchy, status, focus and accessibility in interfaces.
Give every color a role
Each color should have a defined role such as surface, text, border, action or status. Role-based use improves consistency.
Do not rely on color alone
Support errors, success and selected states with text, icons or shape so meaning remains clear to everyone.
Interaction states
Hover, focus and disabled states should be distinguishable without shifting layout.