Design systems 101
Why use a design system?
Design systems establish organized standards that unify product teams by documenting a shared language encompassing product, brand vision, user experience, and visual design.
Design system standards enable design and development teams to adapt to change and scale products while minimizing confusion and redundancy.
The type of system depends on the product's needs, scale, long-term vision, and the team.
Is a design system different that a UI Kit or library of components?
UI kits and component libraries are tangible outputs of a design system. Other outputs include pattern libraries, layouts, usage and implementation guides, and content writing direction.
Design systems not only provide libraries of components but also context and direction around how the components are meant to be used within the product. Depending on the scale and scope of the system, foundations can also be incredibly become dense and require documentation and ongoing implementation support. Good examples of foundational scale could include dynamic language support, text and color accessibility needs.
UI Kits and Component libraries are highly specific while design systems are highly interconnected.
Foundations inform components, components inform layouts and patterns, and layouts and patterns inform product screens and flows. Design systems also involve a community of collaborative, interconnected people/contributors.
What are some outputs of a Design System?
Outputs in a design system depend on the product, the teams, and the existing or missing processes and materials.
Examples outputs in a design system:
Foundation library (Figma + code repositories)
Component library (Figma + code repositories)
Pattern library
Layout library
Icon library
Graphic/Illustration library
Usage guidelines
Implementation guidelines
Design tokens
Content management
Brand management (content tone of voice, visual direction, + asset management)
Contribution guidelines
Governance models
Design system architecture + mapping (or simply a mental model)
Product team support documentation + channels
Education + training materials
Design system reference site
Audits and workshops
Ways of working + processes
How is a design system different than a style guide?
Style guides are relics of print media, typically outlining a brand's color, typography, tone of voice, and design elements. They focus on how to use these assets effectively.
Style guides, though not originally intended for digital media, offer effective design systems for smaller product teams without complex components. They provide a solid foundation for developing a design system since they include essential documentation.
The fastest way to create a system is to document what you’re already using.
Style guides define color, typography, and provide examples, but this information alone lacks the context needed for effective AI tooling. Robust systems capture specific intent and context, guiding AI on how to use design elements effectively.
Resources + references: