Variants share a naming pattern that references their color role, the interaction state they define, and any UI elements they’re linked to. There are 10 color roles, which we use to generate the values of all the color variants in the palette.Ĭolor variants are variables that apply color to the UI, and their values are generated from the color roles. We define colors based on the role they play in the interface. However you should never convey information using color alone. It also makes the whole experience more accessible for merchants who are color blind or who have low vision. This makes things easier to find, identify, and interact with. The color system is designed within the HSLuv color space to generate themes that meet WCAG 2.1 compliant contrast ratios. They also extend the color system so it works across any touchpoint at Shopify.
Defined color roles make things easy to modify and customize later. Colors have meaningĬolors have assigned roles, which hold a specific meaning based on how they function within the interface. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements. Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.Īlthough we value an aesthetically pleasing use of color, we place a higher value on clear communication.
0 kommentar(er)
