Introduction to
Design Systems
What is a Design System?
Let's start by defining "system"
What is a System?
"A system is an interconnected set of elements that is coherently organized in a way that achieves something."
- Donella H. Meadows
Thinking in Systems: A Primer
Systems are composed of:
• Elements
• Interconnections
• Function or Purpose
What is a System?
• Football Team
- Elements: players, coaches, field, the ball, etc
- Interconnections: rules of the game
- Purpose: win games, have fun, etc.
• School
- Elements: teachers, students, books, etc
- Interconnections: admissions, exams, grades, etc
- Purpose: education
Examples
What is a System?
Human Body
• digestive system
• nervous system
• circulatory system
• etc.
Systems within systems
What is a Design System?
"A set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product."
- Alla Kholmatova
Design Systems
What is a Design System?
Elements
• designers, developers, tools, components, etc
Interconnections
• patterns, practices, & processes
Purpose
• support other products and systems
What is a Design System?
Examples
• Lightning - Salesforce
• Polaris - Shopify
• Carbon - IBM
• US Web Design System - 18F
• Primer - GitHub
• Mineral UI - CA Technology
• Atlassian Design Language - Atlassian
• Gestalt - Pinterest
• purple3, shibori3, and malibu - Heroku
What is a Design System?
• Guidelines
• Style
• Components
• Utilities
Anatomy
What is a Design System?
• Accessibility
• Code Patterns & Consistency
• Testing Philosophy and Coverage
• Documentation
Guidelines
What is a Design System?
• Color
• Components
• Iconography
• Motion & Animation
• Purpose & Values
• Spacing
• Typography
• Voice & Tone
Style
What is a Design System?
• Grid Components
• Base Components
Components
What is a Design System?
• Translation
• Theming
• Time-formatting
• CLI tools
Utilities
Why Have a Design System?
• Maximize developer and designer effort
• Scaling UI / UX consistency
• Build apps faster
• Make updates cheap
• Make testing ideas cheap
• Faster onboarding
Should We Have One?
Many of the companies listed with our examples are far larger and have a lot more resources to support a design system
Some questions to consider:
• Will our current processes and structure scale for our needs?
• Could our UI be more easily maintained and updated?
• Are we able to test new ideas as quickly as they would like?
A Fair Question
Should We Have One?
As frontend and design tooling has improved, design systems have become more accessible for small-to-medium-sized companies.
Perhaps it makes sense to start by building tools to support immediate problems and build from there.