Logo of UI Challenges
Sign in
Wireframe example for Color
An example interpretation of the prompt
Icon of target

Color

Icon of book open

Design a color system for a single hi-fi interface. Start with a small palette: one primary color, one supporting accent, a neutral scale, and semantic colors for success, warning, and error. Show how those colors map to real UI parts instead of swatches alone.

Apply the palette to backgrounds, text, icons, buttons, links, and status badges. Include at least one interactive state set so hover, active, disabled, and focus treatments are visible. Keep the hierarchy clear: the page should still read when color is reduced to neutrals.

Use color to separate surfaces, direct attention, and communicate status. Test the combinations you choose against contrast, especially body text, button labels, and small UI labels. If you introduce dark mode or an alternate surface, keep the same role structure so the system feels consistent.

Icon of book open

Remember, colors can be culturally specific in meaning, so consider your target audience. Plus, have fun with it—try a tool like Adobe Color to experiment with palettes and find the perfect match!

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.