IBM Design Language

Carbon Design System

Open-source design system by IBM. Consistent, accessible, and performant components for enterprise products — now with AI components in v11.

// Install

npm install @carbon/react

// Primary brand color

Blue 60: #0f62fe

// Fonts

IBM Plex Sans, IBM Plex Mono

// Spacing scale (px)

4 8 12 16 24 32 48 64 96

UI Kits

Admin dashboard

Full enterprise admin UI: nav header, collapsible sidebar, data tables, stat cards, resource management, modals, and settings.

Presentation website

Marketing site with hero, feature grid, stats, component showcase, product catalog, docs layout, and footer.

Core Components

Buttons

5 variants · 4 sizes (32–64px)

Form inputs

Text, select, checkbox, radio, toggle, date picker, search

Tags

Gray Blue Green Red Purple

Pill-shaped (border-radius: 100px) · 10+ colors

Notifications

Informational message

Success message

Error message

Inline + toast · Info, success, warning, error

Data table

Name	Status
resource-01	Running
resource-02	Failed

Sortable · batch actions · overflow menus · pagination

UI Shell

Product Dashboard Settings

Header 48px · Sidebar 256/48px · #161616 bg

Typography — IBM Plex Sans

Heading 06 — Light 300

Heading 04 — Regular 400

Heading 02 — SemiBold 600

Body 01 — Regular 400 — Secondary text color for body copy and descriptions

Code 02 — IBM Plex Mono — const x = 'hello world';