# Design Systems A Design System is a collection of reusable components, guidelines, and standards that enable teams to build consistent user interfaces at scale. More than a style guide or component library, a design system includes design tokens, patterns, documentation, and principles that serve as a single source of truth for product development. Design systems emerged from the need to maintain consistency across large products and teams. Pioneered by companies like Salesforce (Lightning), Google (Material Design), and IBM (Carbon), they reduce duplication, improve quality, and accelerate development. [[Brad Frost]]'s [[Atomic Design]] methodology popularized the hierarchical approach to organizing design system components. ## Core Components | Component | Description | |-----------|-------------| | **Design Tokens** | Primitive values (colors, spacing, typography) | | **Components** | Reusable UI elements (buttons, inputs, cards) | | **Patterns** | Recurring solutions to common problems | | **Guidelines** | Usage rules and best practices | | **Documentation** | How to use and contribute | ## Design Tokens Design tokens are the atomic values of a design system: - **Colors**: Brand colors, semantic colors, themes - **Typography**: Font families, sizes, weights, line heights - **Spacing**: Margins, padding, gaps - **Shadows**: Elevation levels - **Border radii**: Corner rounding - **Breakpoints**: Responsive design thresholds ## Notable Design Systems | System | Organization | Link | |--------|--------------|------| | Material Design | Google | material.io | | Lightning | Salesforce | lightningdesignsystem.com | | Carbon | IBM | carbondesignsystem.com | | Polaris | Shopify | polaris.shopify.com | | Spectrum | Adobe | spectrum.adobe.com | | Fluent | Microsoft | fluent2.microsoft.design | ## Benefits - **Consistency**: Uniform look and feel across products - **Efficiency**: Reuse instead of rebuild - **Quality**: Tested, accessible components - **Collaboration**: Shared language between design and development - **Scalability**: Easier to maintain large applications ## References - https://designsystemsrepo.com - https://www.designsystems.com - Brad Frost: *Atomic Design* (2016) ## Related - [[Atomic Design]] - [[User Interface Design]] - [[User Experience (UX)]] - [[Accessibility (a11y)]] - [[Brad Frost]]