A design system allows us to move fast, maintain consistency and communicate accurately by providing clear guidelines on using the components we build our product with.
These are the driving forces behind why we do what we do. Learn our foundational thinking and how we implement it across our design system.
Also known as Atoms, these are the smallest possible elements that you will design with. Covering the colours, fonts, scales, layouts, etc.
These are your main building blocks, the bits that make up everything else, so we want to make sure that they are used consistently. It’s up to you how you organise these, but I personally prefer to group by function as it can help clarify what is possible with a particular component – see my post on this topic as to why this is helpful.
You’ll find anything a user needs to interact with to complete a specific task here.
Here, we have the various components that wrap around others. A modal is a great example.
These components allow us to communicate with the user, telling them if something was successful or not.