Industry
HR, Fintech
Client
Deel
Building the design system for Deel HR, the worlds fastest growing start-up
I designed and led the build for a scalable design system for a Deel's SaaS product.
This increased efficiency by 40% and reduced inconsistencies by -30% in 12 weeks after launching.
The brief
Deliver a design system with a minimum of 72 components, shipped as usable components for both Figma and Storybook.
We used an out-of-the-box library called MUI. This is built in React, which was well suited for our needs and the tech stack already in use.
I built the Figma library to accompany the design team.
First we used a decentralised model (non-dedicated devs) to complete the work, then hired devs and shifted to a centralised model, which was faster and more efficient.
Foundations
Colours (Primitive)
Icons
Typography
h1.medium.desktop
h2.medium.desktop
h3.medium.desktop
h4.medium.desktop
h4.semibold.desktop
body.regular
body.semibold
Spacing
These are the core building blocks (or 'Atoms') of a system, they cannot be broken down into smaller elements.
Foundations are combined to create components and components are combined to create templates. These foundations ensure consistency across platforms and experiences.
It is important to test the Foundations with a wide variety of components or designs, as it can difficult to change naming in a system later on.
Design Tokens
Naming of the foundations in the system is taken from the token name for that element. The token name describes the context of how the element is used in a semantic way.
More on this in the Tokens Case Study (not yet live).