What has been changed
Color (primary, dark backgrounds and accent colors)
Color (primary, dark backgrounds and accent colors)
Color (primary, dark backgrounds and accent colors)
Shape (border radius of elements)
Shape (border radius of elements)
Shape (border radius of elements)
We didn't change feature colors (loyalty, promotion, etc.), signal colors (information, success, error, warning), neutral colors (greyscale), interaction colors (enabled, hover, pressed).
Approach
Components
We did an audit of all the component.
Next to it, we replaced color tokens and border radius properties for all the containers, tiles, input fields, dropdowns, etc.
We replaced iconography with new icons
Master pages
We went through master pages to double check and find all the inconsistencies where applicable
Development refinement
We conducted refinement sessions with the development teams and identified all the instances that needed to be updated.
During audit we identified 40+ local color styles in different CSS files. We orginised, and mapped those styles to variables.