skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

IBM Carbon Design System

Codify token-based theming and WCAG-compliant UI patterns for enterprise applications.

Updated Mar 23, 2026
Search Tags:#theming#ui#accessibility#enterprise#design-system#design-tokens#carbon
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill ibm-carbon-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: IBM Carbon Design System
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/carbon-design
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill ibm-carbon-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

IBM Carbon Design System provides a mature, themeable framework for enterprise UI development, enabling teams to deliver consistent, accessible interfaces across products.

Core Features & Use Cases

  • Token-based theming and multi-theme support (White, Gray 10/90/100) for React, Svelte, Angular, and Web Components.
  • Accessibility-first design guidance aligned with WCAG AA requirements, with scalable typography, color tokens, and elevation/shadow guidelines.
  • Governance for enterprise dashboards, data-heavy apps, and internal tools requiring consistent UI and design language across teams.

Quick Start

Install and reference the Carbon design system tokens and theming guidelines to begin theming your components.

Frequently Asked Questions about IBM Carbon Design System

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize enterprise UI with accessibility and multi-theme support?▼

Yes, you can implement WCAG AA and AAA accessibility by using scalable typography, color tokens, and elevation guidelines defined in the Carbon Design System to ensure consistent, accessible interfaces across products.

How do I set up design tokens for multi-theme enterprise dashboards?▼

Set up design tokens by installing and referencing Carbon's theming guidelines, which enables multi-theme support across variations like White, Gray 10, Gray 90, and Gray 100 for data-heavy enterprise apps and dashboards.

Does the Carbon Design System work with Svelte and Angular?▼

Use the Carbon Design System to govern enterprise dashboards and internal tools, applying consistent UI and design language across teams while maintaining accessibility-first design guidance for data-heavy applications.

What is the best way to manage UI consistency across multiple frameworks?▼

The best way to manage UI consistency is to codify your enterprise UI development with a structured design-system guide like Carbon, which provides clear usage patterns and token-based theming across supported frameworks.

Related Skills

Explore More Design & Creative Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
yairbedermanyairbederman

figma-to-code

Translate Figma designs into React and Vue UI components with token-driven styling.

Community
Advanced
gsd-buildgsd-build
7.8k

accessibility

Audit web projects for WCAG 2.1 accessibility issues and generate remediation plans.

Official
Advanced
thc1006thc1006
20

web-component-design

Build scalable UI component patterns across React, Vue, and Svelte.

Community
Advanced