Color
Some elements should not have their colors changed, while secondary elements will work with any design without modification. We provided a list of elements we recommend changing to match the new style.
Downloadables
Download an overview of the color and effect styles used in the plugin's default design:
Accessibility on color
Accessibility
Accessibility is imperative for web design because it ensures that all users, including those with disabilities, can access and interact with the content.
When changing colors check for Contrast ratios always meeting a minimum of 4.5:1.
This is the minimum required for a user, including users with visual disabilities, must be able to perceive content on the page.
There are multiple tools available to check Contrast ratios.
The design system for the plugin is designed for only on bright backgrounds. Always check the background where the elements will be placed to make sure the result is accessible.
Generic recommendation tips when editing color:
- If a color is not accessible, try a darker or lighter version.
- We recommend not using 100% blacks or 100% whites as colors.
- Always use a contrast accessibility checker.
Practical examples
This new color is not accessible with white text
We changed the text color to be accessible
The text color is not accessible
A darker version of the green color has been created to use when necessary only for UI elements
Primary buttons
Primary buttons
Example on how to update visual styles for primary buttons.
Example
Default design for primary buttons
Changed colors for Default and Hover state buttons only
Darker shade of the green for text on white filling buttons
Changed typography
Changed text weight and size to match the proportions of the default design
Changed corner radius
Secondary buttons
Secondary buttons
Example on how to update visual styles for secondary buttons.
Example
Default design for secondary buttons
Changed colors for Default and Hover state buttons only
Darker shade of the green for text and stroke on white filling buttons
Changed typography
Changed text weight and size to match the proportions of the default design
Changed corner radius
Only icon buttons
Only icon buttons
Example on how to update visual styles for the only icon buttons.
Example
Default design for the only icon buttons
We didn't change colors because this button can be used to "close" interactions and it won't be user-friendly to use basic colors like green or red, where they are used to communicate states or alerts
Changed corner radius
Stylist mode buttons
Stylist mode buttons
Example on how to update visual styles for the stylist mode buttons.
Example
Default design for stylist mode buttons
Changed colors for Default and state only
Changed typography
Changed text weight and size to match the proportions of the default design
Changed corner radius
Top navigation
Top navigation
Example on how to update visual styles for the top navigation element.
Example
Default design for top navigation element
Changed active pagination pill color
Used the darker green color for the pagination pills to match accessibility standards
Changed typography
Changed text weight and size to match the proportions of the default design
Sliders
Sliders
Example on how to update visual styles for sliders.
Example
Default design for sliders
Changed fill and stroke color of the active slider element
Changed typography
Changed text weight and size to match the proportions of the default design
Filter tags
Filter tags
Example on how to update visual styles for the filter tags.
Example
Default design for filter tags
Changed colors for Hover state only
Changed typography
Changed text weight and size to match the proportions of the default design
Changed corner radius