awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
carbon-design-system avatar

carbon-design-system/carbon

0
View on GitHub↗
9,172 stars·2,196 forks·TypeScript·Apache-2.0·69 viewswww.carbondesignsystem.com↗

Carbon

Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes.

The system utilizes a platform-agnostic design token system to maintain visual consistency across different technologies. This includes centralized management of brand colors, motion easing curves, and a curated library of accessible SVG icons.

The framework covers a broad range of capabilities, including responsive grid layout management, typographic scaling, and theme-switching logic for light and dark modes. It provides specific interactive elements such as notification systems, tabbed content organization, and binary toggle switches.

The library can be loaded directly from a content delivery network to avoid local installation or build steps.

Features

  • Reusable UI Components - Implements a standardized architecture of reusable UI components to ensure functional and visual consistency.
  • Enterprise Component Systems - Provides a scalable system of reusable UI components designed for large-scale enterprise projects.
  • Accessible Interface Design - Ensures accessibility through built-in ARIA labels and keyboard support across all UI components.
  • Alerts & Notifications - Implements accessible information alerts, status toasts, and actionable dialogs with focus management.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
  • Color Themes - Maintains visual consistency through a standardized system of color swatches and variables.
  • CSS Frameworks - Functions as a comprehensive CSS framework enforcing unified typography, spacing, and color palettes.
  • Design System Components - Offers a comprehensive design system with reusable components, tokens, and professional guidelines.
  • Design Tokens - Provides centralized management of design tokens for consistent styling across digital products.
  • Design Token Systems - Employs a platform-agnostic design token system to ensure visual consistency across different technologies.
  • Design Token Theming - Includes logic for swapping design token sets at runtime to transition between light and dark modes.
  • Toggle Switches - Ships a binary input switch component with customizable labels and full accessibility support.
  • Color Modes - Provides built-in support for switching between light and dark color modes using predefined tokens.
  • Responsive Column Layouts - Organizes content into responsive rows and columns that adapt across defined screen breakpoints.
  • Responsive Grid Systems - Ships a responsive grid system using columns and breakpoints to ensure alignment across screen sizes.
  • Styling Architectures - Uses a token-driven styling architecture to centralize visual constants like colors and spacing.
  • Theme Management - Includes tools for managing and configuring visual themes across a suite of components.
  • Grid Layout Systems - Implements responsive grid structures and column configurations to ensure consistent page alignment across devices.
  • Icon Libraries - Supplies a comprehensive library of standardized vector symbols to ensure visual harmony across applications.
  • Icon Components - Provides encapsulated SVG icon components with support for standardized sizing and accessibility labels.
  • Typography - Provides a comprehensive framework for managing font stacks, weights, and size scaling.
  • Tabbed Interfaces - Provides components for organizing content into composable tabbed views to optimize screen real estate.
  • Tooltips - Provides descriptive text tooltips that appear on hover or focus to give contextual information.
  • Design System Enforcement - Enforces a unified design language by ensuring UI changes adhere to established design specifications.
  • Spacing Scales - Provides standardized spacing scales to maintain consistent layout dimensions across the interface.
  • Vector Icons - Ships a collection of scalable vector icons with configurable sizing for consistent UI rendering.
  • Responsive Layout Systems - Implements adaptive page structures that adjust based on screen size and spacing scales.
  • Typography Systems - Implements a typographic scale to maintain consistent vertical rhythm and font hierarchy.
  • Standardized Components - Provides standardized component wrappers for rendering accessible and scalable SVG icons.
  • Browser Style Resets - Provides browser style resets to ensure predictable rendering across different web browsers.
  • Animation and Motion Systems - Implements a standardized system for managing UI animations and transitions.
  • Easing Functions - Uses mathematical easing functions to control the rate of change and feel of motion transitions.
  • Application Branding - Enforces a unified corporate visual identity using shared themes, icons, and type scales.
  • Unified Entry Points - Provides a single entry point for importing the complete suite of design system elements and styles.
  • System Font Stacks - Defines prioritized font stacks to ensure consistent typeface rendering across different platforms.
  • Icon Libraries - Provides a curated library of accessible SVG icons designed for visual harmony.
  • Icon Styling - Implements utilities for applying custom colors and visual styles to graphical icons.
  • Interactive Tooltips - Provides interactive tooltips that allow users to perform actions directly within the popup content.
  • Global CSS Stylings - Provides utilities for applying baseline resets and global style overrides to HTML elements.
  • Type Style Applications - Assigns cohesive typography properties like size and weight to elements using design tokens.
  • Typographic Hierarchies - Implements a tiered system of font sizes and weights to maintain a consistent vertical rhythm.
  • Typography Resets - Clears browser-default text styling and applies baseline properties for a consistent starting state.
  • Theme Customization - Allows adjusting layout and visual styles by overriding theme variables or using built-in presets.
  • Component-Based Architectures - Implements a modular architecture for building reusable UI elements using encapsulate CSS patterns.
  • General Purpose Frameworks - Component library for enterprise design systems.
  • UI Frameworks - Design system developed by IBM.

    • Star history

    Star history chart for carbon-design-system/carbonStar history chart for carbon-design-system/carbon

    How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

    Frequently asked questions

    What does carbon-design-system/carbon do?

    Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes.

    What are the main features of carbon-design-system/carbon?

    The main features of carbon-design-system/carbon are: Reusable UI Components, Enterprise Component Systems, Accessible Interface Design, Alerts & Notifications, Color Themes, CSS Frameworks, Design System Components, Design Tokens.

    Which projects share features with carbon-design-system/carbon?

    Projects with overlapping indexed features include: twbs/bootstrap — Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides… gluestack/gluestack-ui — gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built,… taiga-family/taiga-ui — Taiga UI is an Angular UI component library and accessible design system used for building enterprise web interfaces.… picturepan2/spectre — Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It… vuetifyjs/vuetify — This project is a comprehensive UI toolkit that provides a declarative, reactive framework for building modular web… spicetify/cli — This project is a command-line utility and development framework designed to modify, extend, and customize the Spotify…

    Projects sharing features with Carbon

    These projects share indexed features with Carbon. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
    • twbs/bootstraptwbs avatar

      twbs/bootstrap

      174,380View on GitHub↗

      Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust

      MDXbootstrapcsscss-framework
      View on GitHub↗174,380
    • gluestack/gluestack-uigluestack avatar

      gluestack/gluestack-ui

      4,931View on GitHub↗

      gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

      TypeScriptaccessibilitycomponent-librarycustomizable-components
      View on GitHub↗4,931
    • taiga-family/taiga-uitaiga-family avatar

      taiga-family/taiga-ui

      4,002View on GitHub↗

      Taiga UI is an Angular UI component library and accessible design system used for building enterprise web interfaces. It provides a comprehensive collection of reusable interface elements and layout tools, functioning as a mobile-first UI kit with responsive components that adapt to different device capabilities. The library distinguishes itself through an integrated data visualization library featuring various chart types and a dedicated form management framework with built-in validation and formatting for specialized data. It also features AI-driven development workflows by integrating comp

      TypeScriptangularbest-practicescdk
      View on GitHub↗4,002
    • picturepan2/spectrepicturepan2 avatar

      picturepan2/spectre

      11,317View on GitHub↗

      Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

      CSS
      View on GitHub↗11,317
    Compare all 30 related projects→