Carbon Design System· Design Systemcarbondesignsystem.com

IBM's enterprise design system · open source

Carbon is IBM's open-source design system.

Carbon is what you use when you need to ship to 500,000 employees, support 40+ languages, meet WCAG AAA, and keep design consistent across products built over a decade.

Color Palette29 tokens

background#ffffff

surface#ffffff

ink#161616

ink-inverted#ffffff

primary#0f62fe

primary-hover#0353e9

primary-active#002d9c

secondary#161616

tertiary#0f62fe

layer-01#f4f4f4

layer-02#ffffff

layer-03#f4f4f4

layer-hover#e0e0e0

layer-row-hover#e5e5e5

on-background#161616

on-surface#161616

on-primary#ffffff

text-secondary#525252

text-placeholder#a8a8a8

text-disabled#c6c6c6

border#c6c6c6

border-strong#8d8d8d

border-interactive#0f62fe

button-secondary-bg#393939

success#24a148

warning#f1c21b

error#da1e28

info#4589ff

shadow-modal#b3b3b3

Buttons

TypographyGoogle Font

IBM Plex Sans

display-04

Enterprise, engineered.

92px · 300 · -1.8px

display-03

Built for scale

72px · 300 · -1.44px

display-02

Carbon is what you use when you need to ship to 500,000 employees, support 40+ languages, meet WCAG AAA, and keep design consistent across products built over a decade.

54px · 300 · 0px

display-01

--cds-interactive-01: #0f62fe

42px · 300 · 0px

productive-heading-04

Carbon is what you use when you need to ship to 500,000 employees, support 40+ languages, meet WCAG AAA, and keep design consistent across products built over a decade.

32px · 300 · 0px

IconsCarbon

Set: Carbon · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Built for scale

Carbon is what you use when you need to ship to 500,000 employees, support 40+ languages, meet WCAG AAA, and keep design…

Design System

none

notification

circle

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Built for scale

Carbon is what you use when you need to ship to 500,000 employees, support 40+ languages, meet WCAG AAA, and keep design consistent across products built over a decade.

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesign SystemCarbon Design System

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Carbon Design System.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Carbon Design System tokens
export const theme = {
  primary: "#0f62fe",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Carbon is what design at IBM looks like — precise, structural, and built to last as long as the mainframes it describes.

Carbon Design System · Design System