I'm currently in the process of designing customer badges for my application and have encountered a styling challenge. I've successfully implemented a color-coded badge that reflects the customer's name, with the color determined by a subjective rating provided by the user.

Recently, our client requested the addition of a second rating based on the customer's purchasing volume. Unlike the subjective rating, this new rating allows users to choose from a scale of 1 to 10, each with personalized colors.

Question 1: How can I display these two distinct colors on the badge-customer-component? The current representation is as follows:

Current Badge Design

Question 2: What colors do you recommend for the first rating (level 1 to 5) and the second rating (max 10, with personalized colors)? Additionally, what color options should I offer users in the selector component for the second rating?

I want to ensure a visually appealing and intuitive design that clearly communicates both ratings. Any suggestions or best practices would be greatly appreciated!

  • You can't expect answers to be specific about why and what without knowing what problem it will solve. Please specify what you have tried and why that didn't work.
    – jazZRo
    Commented Nov 10, 2023 at 10:18
  • You should also use a design which takes into account folks with colorblindness.
    – IconDaemon
    Commented Nov 10, 2023 at 22:06

1 Answer 1


There are a few layers of complexity to work through when trying to implement or introduce colours into new UI components:

  • current design system colour palette
  • consistent and meaningful colour grading for scale
  • any accessibility requirements
  • reusability or clash with other parts of the interface (e.g. light/dark mode, hover-over behaviour, etc.)

You to have work through the best practices for at least some or all of these considerations, so there is no simple answer here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.