SaaS Design System
I led a 12-month project to create a bespoke design system—a single source of truth—designed to power multiple products and themes. The name was inspired by the challenge of finding an off-the-shelf design system that was “SaaSy” enough to meet our needs. This project aligned stakeholders across a large organiation and laid the foundations for a Design Operations team, which will be instrumental in supporting the business in executing its strategy.
Research
The project began, as any good project should, with thorough research. I gathered insights by speaking with designers, collaborating closely with partners in Product and Engineering, and engaging with design communities like Into Design. I also spent significant time reviewing other design systems to understand what “good” could look like for us.
SaaSy draws inspiration from several standout sources: the Atlassian Design System’s robust token structure, Adham Dannaway’s Practical UI for its clever use of alpha values, Untitled UI and Stratis for their component composition and aesthetics, and the work of Eugen Eşanu, a designer with industry-specific expertise whose work I admire.
Foundations
Careful consideration went into establishing the foundations of the design system to ensure it supported the company’s products and scalability needs. A global color palette was created using Leonardo, meeting WCAG accessibility standards and enabling easy product theming. Typography styles were defined to establish a clear hierarchy and scale across fonts, weights, and styles. Grid and sizing systems provided consistency in spacing, alignment, and structure, while a comprehensive iconography asset library ensured visual cohesion across all products.
Design Tokens
I spent a lot of time creating a design token structure that was simple, flexible, and scalable. It needed to support multiple products within the brand and handle themes like dark mode. Taking inspiration from the Atlassian Design System, I developed a structure that was tested and refined to meet these needs. Tokens were created in Figma using Variables, then imported into Tokens Studio.
Component Library
I built a component library with 38 foundational components to support both a Web Application and a Chrome Extension. Separate pattern libraries were created for more complex components like modals, data tables, and search filters. To support designers and engineers, I created Figma documentation that detailed the available components, their properties, and how to use them, along with engineering-focused guides on component anatomy.
