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:
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!