I built a design system from scratch using variables and tokens, then I built the product components and decided to make a product out of it: an HR management system and the SaaS landing page that sells it.
Atomic Design in Five Stages
In the process of creating my first design system, I discovered a methodology used in making design systems called Atomic Design, by Brad Frost. It consists of five stages:
- Atoms are the simplest, smallest building blocks of UI, which can’t be broken down any further: buttons, labels, typography styles and inputs.
- Molecules: atoms bond together to form a molecule. In UI, atoms come together to make a functional unit, like a search bar made of an icon, a label and a button.
- Organisms are more complex components formed of clustered molecules, like a product card, a header or a product’s sidebar.
- Templates are like wireframes: they focus on content structure, not actual content.
- Pages are the final UI with the actual content.
The Atomic Design methodology helps designers and developers build scalable, consistent and systematic interfaces.
Variables and Tokens First
Everything starts from variables and tokens. The design system has dark and light modes, and responsive modes as well. On top of it I built the product components, then the HR management system itself, starting with its first screen: the dashboard.
The Details
The details are the output of a well-planned design system.