DESIGN SYSTEM: Unpacking the Core Concepts of Design Systems

Making design bigger isn't easy. Being efficient doesn't just happen. Hiring more designers without rules is a mistake.

With each new addition to the team, fresh concepts for color schemes, typography, and patterns infiltrate the product, exacerbating inconsistency and elevating maintenance expenses. Each new hire contributes to design “chaos”.

The only way to stop things from getting chaotic is to use a design system. Slowly making the design system bigger helps things become more consistent and makes software develop faster.

Design can grow, but only if we have a strong “design system”.

In the 1970s, Christopher Alexander, a Software Engineer from NATO, along with Murray Silverstein and Sara Ishikawa, wrote a book called "A Pattern Language." This book talked about how different parts of architecture connect in a simple and inclusive way.

That's where the idea of "Design Systems" really started.

A Design System comprises standards for both design and code, alongside components that harmonize these disciplines. Picture it as a universal set of instructions and a Lego kit accessible to all.

Whether you're a designer or a developer, this guide to constructing your own design system is tailored for you.

Design systems continually evolve as collections of reusable components, principles, and guidelines, providing designers and engineers with a unified framework for ensuring consistency in product and web design.

Think of it like a plan that helps everyone speak the same language and follow a clear path when making digital stuff. A design system can save time by reusing elements and patterns when designing and building things on a big scale.

The great thing about design systems is that all the components in these areas are already fine-tuned and coded.

This means whenever you're working on a new project or updating an old one, all the necessary pieces are readily available—you just have to use them.

What to include in a design system?

There’s no standard list of components to include in a design system, but there are common elements that the most effective design systems tend to feature:

• Visual Elements: This includes guidelines for typography, color palette, iconography, imagery style, and layout grids.
• UI Components: A library of reusable user interface components such as buttons, forms, navigation menus, cards, and modals, along with guidelines for their usage and behavior.
• Design Principles and Guidelines: Clear principles and guidelines that outline how to apply the visual elements and UI components cohesively across different screens and interfaces.
• Brand Guidelines: Specifications on how to maintain brand consistency through design, including logo usage, brand colors, and tone of voice;
• Accessibility Standards: Guidelines for ensuring that designs are accessible to all users, including those with disabilities. This includes considerations for color contrast, text size, and keyboard navigation;
• Design Tokens: A system for managing design variables such as colors, typography, spacing, and other visual attributes in a centralized manner.
• Documentation: Comprehensive documentation on how to use and implement the design system, including code snippets, usage examples, and best practices;
• Code Components: Front-end code snippets or libraries that provide implementations of the UI components in code, typically using HTML, CSS, and JavaScript frameworks;
• Governance and Maintenance Guidelines: Procedures for maintaining and updating the design system over time, including versioning, feedback loops, and governance processes;
• Design Language: A cohesive design language that defines the overall look and feel of the product or brand, including its personality and tone;
• Tooling and Resources: Resources such as design templates, plugins, and prototyping tools that help designers and developers work more efficiently within the design system;
• Testing and QA Guidelines: Guidelines for testing and quality assurance to ensure that designs and code implementations meet the desired standards and are free of errors.

What are the Benefits?

There are three key advantages to developing a design system for your business:

• Consistency in Design: Implementing a design system ensures uniformity in product and web design. This not only simplifies tasks for your team but also enhances brand recognition and improves the user experience. By maintaining consistency, you can minimize confusion and enhance your brand's reputatio;
• Facilitates Collaboration Across Teams: A well-structured design system breaks down operational barriers between different departments. By adopting a unified approach to design and implementation, your design and product teams can collaborate seamlessly throughout every project's lifecycle;
• Enhanced Speed and Scalability: A design system streamlines repetitive tasks, such as recreating identical elements and ideas. This enables your team to work more efficiently and unleash their creativity. By reducing duplicative work, your team can accelerate the pace of design and increase its scalability.

I asked "What do you do to make sure the Design System stays consistent and works well as things change?” to different Designers that work daily with Design Systems, let′s see what they had to say:

Raquel M . Hidalgo , Product Designer, Fortris, Spain

I think one of the biggest challenges is organization and coordination, not only among designers but more importantly with FE and delivery managers.

Without them it will be no more than a pretty UI KIT and rules for designs to be consistent... that's not small thing but I aim for biggest scopes with our DS so FE allies are critical.

What I have done until now, and it's been working for us:

Audit internal processes of hand-off (UX to PODs) and deliver (PODs to production)

List DS users and draw journey maps for each.

Design a federated model within a collaborative workflow (the workflow was made taking into consideration each journey).

I have set two DS owners (FE manager and myself UX) so every collaboration, update, improvement has to be on a branch and send to review to DS owners, who are approving, merging, and with a cadence of once a week publishing changes in library and reviewing those are populated to every file and to storybook. (Storybook updates are also reviewed and approved by the DS owners). Tokenisation is key.

I regularly (sort of) do some component workshop to align collaborators on "how to build" "naming conventions" "spec convention" or " micro interaction" to ensure when a branch hit a review process its updates meet requirements and standards.

Felipe da Silva Pereira , UX/UI Designer, One Data, Germany

I believe that maintaining a design system during changes requires consistent communication and teamwork. By encouraging open discussions, we ensure everyone understands the system's principles and updates. I also highly recommend clear, accessible, and regularly updated documentation to reflect any changes. Regular reviews and feedback loops help us identify areas for improvement and ensure the system evolves smoothly. Staying informed about industry trends and user feedback allows us to anticipate changes and proactively adapt the design system. Cultivating a culture of adaptability and continuous improvement is crucial for sustaining a robust and effective design system.

Santiago Fernandez Alfaro , Product Designer, The TMRW Foundation, Germany

First of all, I'd like to share how we are managing the design system in our startup. Previously, components were selected randomly without clear validation criteria, creating a quite chaotic environment.

We are currently in a crucial phase of adopting the system, and I have managed to establish an initial structure with foundational elements already defined. From my experience, I consider it essential to maintain the system's consistency and prevent potential setbacks through a strategy focused on continuous training and thorough documentation for everyone directly involved with the system.

From a design perspective, it is imperative to adhere to the emerging documentation to ensure the creation of elements in harmony with the rest of the team. Furthermore, maintaining fluid and aligned communication with the development team, focusing on design tokens as a starting point, is crucial. This ensures that the development team has a solid foundation to begin building their component library.

The lack of knowledge can be a significant obstacle, so I find it crucial to have a profile that serves as a bridge between the design and development teams, thus facilitating the integration and application of the mentioned strategies.

In summary, training, documentation, and communication are the key pillars for naturally and effectively implementing the consistency of our design system, allowing for its coherent evolution amidst any changes.

Mojtaba Mousavi , UX/UI Designer, Product Designer, Nito Labs, Turkey

To keep our design system consistent, we set clear guidelines and work with a modular approach following atomic design principles, which allow for easier updates and modifications without disrupting the entire system. We're all about version control to track changes smoothly. Regular check-ins and reviews with the team help us fine-tune things. Plus, we've got docs and training to keep everyone in the loop. Internal collaboration and receiving feedback are key to keeping it fresh and user-friendly!

Murilo Ventura , UX Designer/Design System, NEES, Brazil

To maintain the consistency and effectiveness through change, we emphasize three key areas. Firstly, collaboration between design, development, and product teams ensures a shared understanding of evolving needs and facilitates seamless adjustments. Secondly, by actively identifying and preventing risks. Lastly, we balance business impact with technological feasibility, ensuring that any changes align with our goals and capabilities.