Design systems have a reputation for being big, expensive projects. For most of our clients the opposite works better: start with the pieces you use on every screen and grow from there.
The twelve components we always start with
- Buttons and links
- Form fields, selects and checkboxes
- Cards and list items
- Navigation and tabs
- Modals and toasts
- Typography and spacing tokens
Tokens before components
Colour, type and spacing tokens are the cheapest thing to get right and the most expensive to fix later. Define them first, in Figma variables and in code.
When Ledgerly adopted this approach, their designers and developers stopped debating button styles and started shipping features again.
Written by
admin
