Foundations
A shared collection of reusable components, standards, and documentation used to build consistent digital products.
What is a design system?
This common component triggers an action when clicked.
What is a button?
Variables like --color-primary and --space-md.
What are design tokens?
The people responsible for maintaining and evolving the design system.
What is the design system team?
A UI that works across mobile, tablet, and desktop is considered this.
What is responsive design?
Reusable visual building blocks like buttons, colours, and icons.
What are UI components?
A collection of components arranged to solve a recurring UI problem, like login forms or navigation menus.
What is a pattern?
This enables a product to switch between light and dark mode without rewriting components.
What is theming?
The process of deciding whether a new component belongs in the shared library.
What is governance?
This collaborative online whiteboard tool is often used for user flows, workshops, mockups, and system mapping.
What is Miro?
A documented set of rules describing how visual elements should look and behave.
What is a style guide?
Material UI calls these pre-built combinations of components “_____”.
What are templates? (or “layouts,” depending on framing)
Typography scales, spacing systems, and border radius values often live here.
What is the token library?
A common tool used to document and preview UI components for developers.
What is Storybook.
Google created this popular design system used in Android and web apps.
What is Google’s Material Design?
The principle that ensures users don’t need to relearn interactions across screens.
What is consistency?
When developers copy and tweak existing components instead of reusing shared ones, this problem emerges.
What is component drift? (or “design inconsistency”)
Material UI exposes this object to customize colors, spacing, typography, and component defaults.
What is the theme object?
When teams ignore the design system and build custom UI instead.
What is design system bypass? (or “adoption failure”)
This design collaboration tool is widely used for component libraries and UI mockups.
What is Figma
This concept separates reusable design decisions from implementation, often stored as variables like spacing-sm or color-primary.
What are design tokens?
The process of breaking a large interface into reusable independent pieces.
What is componentization?
Changing a primary color in one token and having every component update automatically demonstrates this benefit.
What is system-wide scalability?
The balance between enforcing standards and allowing product teams flexibility.
What is controlled extensibility?
This tool is commonly used to document product specs, design system guidelines, and internal knowledge bases in one place.
What is Notion?