Led the design efforts to theme Square Online design system to reflect the seller's brand and unlock site customizations.

When sellers build their website using Square online Editor, Each section on the website is consistent of background color, images and some UI components like input field or a button.

How to guarantee that these elements would still be visible if the seller changed the section background color?

That’s why I designed color theming logic. It’s an automated way to maintain the visual hierarchy and contrast of UI elements with any color background. The best thing about it is that sellers don’t have to select each element locally and apply a new color, it’s done all at once for them.

It works by generating a color ramp based on contrast ratio with the section background color.

Here’s some more examples