Humans tend to be uneasy with chaos and change. And having well-documented Systems standardizes decisions while bringing order.

You might be thinking… “Quite an agnostic point to start with!” Indeed it is. But, systems are used daily — shopping shelves, transportation, etc. Adding that to the exponential growth of the digital world, Design is more relevant than ever. The demand for meaningful experiences and well-crafted products puts pressure on designers across the globe.

And that's why Design Systems are part of our core strategy to build top-digital products. They work as a framework with a high impact on increasing the consistency and speed of software development. Let's see why and how Pixelmatters uses it.

What’s a Design System?

A Design System is a language created for digital products that support all teams to build consistent experiences throughout — a collection of rules, principles, constraints, and best practices. A system is a framework, a rule book that defines how everything will work together.

Define a plan and document it upfront

Planning and documenting are underrated steps in creating Design Systems. A living document that evangelizes designers is easily shareable and constantly evolving. It also allows us to set the mote and rules while being aligned with principles:

1. Robust: All design elements should contemplate different states, edge cases, and possible variations to be applied;
2. Accessible: Design for everyone. All design elements must perform against good accessibility practices (e.g., enough contrast is a must, WCAG guidelines...).
3. Flexible: All design elements should be flexible to scale for different situations or design patterns.

Based on that, we understood how we could build the foundations and components of our smart Design System prepared to make top-digital products:

• Design Tokens are the visual design atoms of the design system — the smallest pieces. These design variables describe color, grid, spacing, typography, radius, shadows, etc. These tokens aim to reflect the core elements that impact the whole design and define the rules from which the project should live.
• Foundations are the lowest level of a Design System — composed of Design Tokens, and they should always be followed when designing the project.
• Components consist of atoms put together that create molecules, organisms, and pages. If we combine an icon with text, we might create a tab. Aggregating tabs on the background make a bottom navigation component. Components are the bulk of our Design System, generally composed of Buttons, Inputs, Cards, Navigation, etc.