Getting the differences in shades right between side-by-side elements is a tricky balance because grays look nice and serve a great purpose in softening importance of elements, but high contrast elements are necessary for an accessible experience that all users can benefit from.

Contrast can be tweaked in 2 specific ways:

1. adjusting the color of an element, like text or a background
2. adjusting how large a colored element like a border-width or font-weight is

On our listing card, we'll try bumping up the font-weight of the title to make it stand out even more on the card's background.

We'll also increase the lightness of the descriptive text to make it a closer blend to the background. This is where you need to be careful, as making the text and the background too close together will make the text hard to read for users with poorer eyesight.

With the increased title size, the title stands out even more, in addition to just having it sized up, adding additional contrast with a thicker stroke makes the title an even more visually important element of the card. This is all assuming the title is one of the most important pieces of information we wish to relay to the user.

A general rule of thumb can be:

The shorter the text, the greater the weight

Again, if price were deemed more important, we should not give so much visual importance to the title, and instead pass it along to the price tag.

Here's what the listing card looks like now:

The card has come a long way! Each of the concepts of visual importance helped increase or decrease the prominence of different elements until we have a card where different elements like the heart button, the title, and the price stand out more than secondary information like the description.