A design system is a systematic and scalable approach to product development complete with guidelines, principles, tools and code.
A design system is more than a component library
Design systems are not a ‘nice to have’ but foundational to succeeding in the new digital economy. With multiple brands, product lines, and a global customer base, today’s business leaders can't play guessing games with their digital experiences.
A design system is a “system of systems” with a set of operational processes that offer a library of visual style and components documented and released as reusable code for developers along with tools for designers. A design system also bakes in guidance on accessibility, page layout, editorial, branding, data visualization, UX patterns, and other user experience considerations.
A design system is not a singular entity but made of 6 separate pieces that include:
Design language
The foundational visual characteristics of your brand, as expressed in your digital products.
This includes typography, colors, icons, spacing and information architecture, and these are maintained as Design Tokens (pieces of Ul information) in code.
Design kit
Used by product teams to build and iterate on new experiences, the kit includes styles, symbols and components that mirror the JavaScript component library. The design kit and component library must always be kept in sync.
Component library
Version-controlled user interface components used to build products and experiences, implemented in code that lends itself to your organization's tech stack
Developer sandbox
A developer tool used to build components in isolation, without impacting the live products.
Developers also use the sandbox to document use cases, and to create structural and visual testing for QA. It can include a live playground for experimenting and testing in the browser.
Documentation
Guidelines and information needed to use the design system. The documentation ensures that any new team members from any discipline can feel comfortable contributing to projects within the boundaries of the design system.
Governance model
The processes that control updates, workflows, contribution and decision-making for the design system. The governance model is typically the foundation of a DesignOps practice for many companies.
Learn more
What are the top 3 organizational impacts of a design ...
Does it seem like everyone is talking about design systems? Well, it’s with good reason.
At scale, design systems are necessary to ship on-time & on-brand. They significantly improve capital efficiency by reducing waste and lead time.
A design system enables product teams to focus on customer problems instead of time-consuming specifications, duplication of effort, and long QA work. It saves time and money while enabling getting to market faster and with higher quality.
A design system helps:
Reduce lead time
Improve speed to market
Unify customer experience
Improve collaboration across teams and brands
Provide easier onboarding for new hires and vendors
Scale your ability to build on-brand market-leading products
Learn more
A business case for design systems
In this webinar our CEO, Nick Van Weerdenburg, and Chief Design System Architect, Varun Vachhar, discuss how to quickly align design, development, and leadership on your design system initiatives while mitigating the risks of taking the wrong approach.
The top three business benefits of a design system
Design systems have significant benefits for a businesses’ bottom line and the day-to-day effectiveness of product teams. Here’s a simple, benefits-first and jargon-free look at how a design system can help your organization reduce costs.
SPEED MATTERS