Why design systems matter
Many UI/UX and product design adverts mention design systems, component libraries or style guides. Companies want designers who keep a product consistent and make developers' work faster. A design system is how teams do that at scale.
What a design system is
A design system is a shared set of reusable parts and rules for building a product. It usually includes:
- Foundations, sometimes called design tokens: colours, type sizes, spacing, corner radius and shadows, each with a name, such as "colour primary" or "space 16".
- Components: buttons, inputs, cards, lists, tabs, alerts and so on, each with its variants and states.
- Patterns: common combinations, such as a login form or an empty state.
- Guidelines: when to use each part, and when not to, with plain explanations.
Large public examples include Material Design from Google and the GOV.UK Design System. Reading them is free and teaches a lot.
States matter
A component is not finished until all its states are designed. For a button that might be:
- default
- pressed
- disabled
- loading
For a text input: empty, focused, filled, error and disabled. Developers need these to build it properly, and users need them to understand what is happening. Missing states are one of the most common gaps in junior portfolios.