UI Color Preview

A palette can look great as swatches and still fall apart in a real interface. You are here to answer: how do my colours actually look on buttons, cards and alerts? UI Preview drops your colour roles onto real components so you can validate the system before handing it off.

How to use it

1. Set your semantic colour roles.
2. See them applied across buttons, inputs, cards, badges, navigation and alerts.
3. Switch between the light, dark and AMOLED themes to check every mode.
4. Adjust any role and watch the whole preview update.

Good to know

• Success, warning and error states are where palettes most often break — check those alerts carefully.
• What passes contrast as text may still be too weak for a thin border or a small icon.