Building a Zero to One multi-brand design system

Overview

SHR was set to undergo a major revamp of their core human resources information system (HRIS) and needed a new, Figma-native design system to help roll out their new brand while unifying the design language across their various products and properties.

Challenge

The core solution is a continuously expanding set of tools that spans multiple modules, covering all your HR needs. With many moving parts, the system must not only unify these various aspects but also remain adaptable to each client’s theme.

Solution

Establishing the design foundations

I started by establishing a base set of color primitives. Since it’s a white-label solution, keeping it generic was essential to ensure adaptability to each client’s theme. I expanded each color into lighter and darker shades to accommodate additional interaction states and use cases in digital interfaces. With the color primitives in place, I created semantic palettes for specific purposes such as foreground, background, and borders. I then defined the remaining design tokens, including grids, sizing, spacing, shadows, and borders.

Creating the component library

After completing the initial draft of the style guide, I leveraged the list of components identified during the audit. I prioritized them based on their frequency of use, starting with buttons and other smaller, commonly used components. From there, I combined and expanded them into larger, more complex components.

Writing thorough documentation

I documented each section of the guide with detailed spec sheets and component states. I collaborated closely with the engineering team to ensure clarity and alignment with sprint goals when implementing new components, revisiting and refining as needs evolved.