Color refers to the combination of hex codes, hue, saturation, and lightness, or other mechanism for telling the computer what type of light to beam onto your computer screen. It can make a design jump off the page, because it is literally coming out of the screen at your eye as a ray of light.

Like too much of any good thing you can quickly overdo it and clutter your page though. A little color goes a long way. Look at the color on this page, you might notice the logo in the top has a bit of color, maybe the button in the example below draws your attention. This course sparingly uses color to make sure that examples pop out of the page and stand as the queen of the content.

In our listing card example, one option with color could be in its interactive piece: the heart button. If you decide that the heart button is really where you want your users to be engaging with your app, you could make it stand out with color. A solid fill button will really draw attention to itself on a white background.

However, in this scenario when the listing card will likely be repeated many times over, coloring the button can be a risky idea, as you run the risk of a dozen solid buttons jumping out of the page at you. In the spirit of dialing down visual importance, too many bright buttons is not going to be your friend.

It might make sense in a case like this to outline the buttons in an accent color, and leave the fill white so the color doesn't start to dominate too much of the UI.

Another alternative to coloring the button is adding color to it, perhaps with an adornment element like a badge. Consider marking some items as "featured" or "new" if you'd like to draw special attention to something or give it a little visual flair.

By adding the "featured" tag, our card can draw attention to itself when it needs to (to highlight an actual featured listing), and stay out of the way when it's just a plain listing.