Design Library
Master Lock cLOTO
Building the design library from the ground up for a “Connected Lockout Tagout” software for Master Lock
Master Lock is building a "Connected Lockout Tagout" software that allows companies to ensure their workers are staying safe and following OSHA standards while working in an industrial setting. This platform is completely new to the company, so the goal was to create a foundation for the design library that aligns with the Master Lock brand while still providing enough colors and options to create an accessible UI.
Variables for Scalability
Using the “Variable” feature in Figma
To make the design system as scalable as possible, I used variables to define color tokens and set up options for both dark and light mode. I also used variables for typography, which will make it easier in the future if we ever need to update fonts, sizes, etc.
Brand
Matching the brand, but keeping it accessible
The branding guidelines we were given for Master Lock were very marketing focused. I took the guidelines and the strong vibe that it goes for, and expanded it to more colors and options for us to use to create an accessible product. This was achieved with mostly white and the primary black color, with the Master Lock red as highlights. For a few of the elements like statuses, we’ll need colors, and I took inspiration from the colors of the hardware that goes with the software. I went with very small radii for buttons, icons, checkboxes, etc to emphasize boldness and strength.
