Carbon Design System
IBM's open-source UI framework for consistent, accessible enterprise products.
Product Overview
Carbon Design System is IBM's comprehensive open-source design system for building digital products and experiences, used across IBM offerings like Watson and Cloud. It provides reusable components, patterns, guidelines, and tools to ensure consistency, accessibility, and scalability. Carbon emphasizes data-driven design, inclusivity, and developer-friendly implementation with React components and Figma kits. Components: 100+ ready-to-use UI elements (buttons, forms, data viz) with variants and states. Guidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance). Tools: Figma library, React implementation, Sketch (legacy), and code packages. Resources: Carbon for IBM Products (internal), community contributions via GitHub.
Best For
Guidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance). Tools: Figma library, React implementation, Sketch (legacy), and code packages. Resources: Carbon for IBM Products (internal), community contributions via GitHub.
Key Features
- Components: 100+ ready-to-use UI elements (buttons, forms, data viz) with variants and states.
- Guidelines: Detailed specs for color, typography, motion, icons, and accessibility (WCAG compliance).
- Tools: Figma library, React implementation, Sketch (legacy), and code packages.
- Resources: Carbon for IBM Products (internal), community contributions via GitHub.
Pros
- +Open source
- +Cloud-based, no installation needed
- +Extensive icon library
- +Color palette generation
Cons
- -Adoption requires team alignment
- -Customization can be complex
/// SPECS
- Pricing:Free
- Platform:Browser
Airtable UI Kit
Figma components for designing Airtable-integrated apps with consistent UI patterns.
Backstage Design System
Figma kit for Backstage developer portals with UI components and guidelines.
Base Gallery
Figma community file showcasing a collection of UI components for design inspiration and prototyping.
Atlassian Design System
comprehensive guidelines and Figma components for consistent, accessible product interfaces.
Cloudscape Design System
AWS open-source UI framework for consistent, accessible enterprise cloud applications.
Elastic UI
open-source React framework for consistent, accessible enterprise interfaces.
Evergreen
open-source React UI framework by Segment for consistent, accessible enterprise applications.
SAP Design System
open-source framework for consistent, accessible enterprise UI across SAP products.
Flowbite Design System
open-source Tailwind CSS component library with Figma kit for rapid UI building.
Animalia DS
comprehensive design system for consistent UI components and guidelines in Animali apps.