Scott
Use this directory to find an official resource that fits your platform and implementation needs. A design system can include principles, tokens, components, patterns and contribution rules; the scope varies. A content style guide, platform guideline and coded component library are useful but different resources. The preserved images are illustrations from the original collection, not proof of the latest version.
1. Decide what kind of resource you need
- Platform guidance: conventions and behaviors for a specific operating system or product ecosystem.
- Design and code components: reusable patterns with documented states and implementation requirements.
- Content and brand guidance: voice, terminology and visual rules that support a product experience.
- Governance: ownership, releases, contribution review and migration guidance that keep shared resources usable.
2. Check a system before adopting it
- Match the target platform and framework to the supported resources. A web component library is not automatically a native mobile kit.
- Open one component your product needs and check states, keyboard behavior, content guidance and code examples.
- Read licensing, package requirements and update or migration guidance. Public documentation does not make every asset unrestricted.
- Try the component with real labels, translated text and your data. Record gaps rather than assume visual consistency guarantees usability.
- Name a maintainer and decide how your team will review upstream changes and local exceptions.
3. Ten resources and the questions they answer
1. Google Material Design
Material provides guidance and component resources for designing with the Material system. Start with the target platform and a component’s states, rather than copying colors from a screenshot.
Adoption question: Does the chosen implementation expose the interaction states and theme controls your project needs?
Open the official Google Material Design resource
2. Mailchimp Content Style Guide
Mailchimp’s public content guide is useful for voice, tone and writing conventions. Treat this linked resource as content guidance, not a universal downloadable UI component kit.
Adoption question: Can you adapt the approach to labels, errors and help content without copying another brand’s voice?
Open the official Mailchimp Content Style Guide resource
3. Microsoft Fluent 2
Fluent 2 organizes resources for web and Microsoft-related platform experiences, including components, tokens and accessibility guidance. Check the platform-specific implementation.
Adoption question: Which components are available for your web or native target, and what differs between them?
Open the official Microsoft Fluent 2 resource
4. Apple Human Interface Guidelines
Apple’s HIG describes platform conventions and interaction guidance. It helps frame decisions for Apple experiences; it is not a promise that one web kit covers every Apple platform.
Adoption question: Which native conventions should the app preserve, and where does your custom UI need a reasoned exception?
Open the official Apple Human Interface Guidelines resource
5. Atlassian Design System
Atlassian publishes foundations, components and patterns for its product ecosystem. Use its component guidance to investigate content, states and interaction details.
Adoption question: Does the documented pattern fit your workflow, and what code or package requirements accompany it?
Open the official Atlassian Design System resource
6. Shopify Polaris
Shopify documents Polaris web components for app experiences. Use the current documentation for your extension or app surface; older screenshots or React examples may refer to a different generation.
Adoption question: Are you building for the supported Shopify surface, and which components and APIs are available there?
Open the official Shopify Polaris resource
7. Adobe Spectrum
Spectrum provides Adobe’s design-system guidance and component resources. Review the particular design and implementation package you intend to use.
Adoption question: How are the component’s states, accessibility requirements and theme variations documented?
Open the official Adobe Spectrum resource
8. Uber Base Web
Base Web is a React component toolkit associated with Uber’s Base design system. Evaluate it as a code dependency as well as a visual reference.
Adoption question: Does its current package support your React setup, customization needs and maintenance plan?
Open the official Uber Base Web resource
9. Salesforce Lightning Design System
SLDS supplies design guidance and resources for Salesforce experiences. Keep design-system capabilities separate from Salesforce product features such as AI services.
Adoption question: Which version and platform components should your Salesforce project use, and how will customization be maintained?
Open the official Salesforce Lightning Design System resource
10. IBM Carbon
Carbon combines IBM design guidance with reusable components and implementation resources. Explore component behavior, data-display patterns and the available framework packages.
Adoption question: Can the selected pattern represent your actual data, loading, empty and error states?
Open the official IBM Carbon resource
4. Turn the directory into a shortlist
Select two or three resources that match your platform and compare one representative component. Record supported states, required packages, documented constraints, licensing and maintenance ownership. A system’s presence in a successful company does not establish that it caused that company’s growth or will increase yours.
For hands-on practice, use four component review exercises based on design-system examples. This directory helps you find resources; the companion guide helps you inspect and adapt a component in your own file.
