Square online | Color theming

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

two mobile screens with pink color theme

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.

color contrast

Here’s some more examples

More by Shimaa Hassan

View profile