carbon-design-system/carbon
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.
- 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.
