/carbon

A design system built by IBM

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Carbon Design System

Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Carbon is released under the Apache-2.0 license CI workflow status Maintained with Lerna PRs welcome Chat with us on Gitter

Getting started

If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

We also have community-contributed components for the following technologies:

If you're trying to find something specific, here's a full list of packages that we support!

Package name Description
carbon-components Component styles and Vanilla JavaScript
carbon-components-react React components
@carbon/elements IBM Design Language elements like colors, type, iconography, and more
@carbon/colors Work with IBM Design Language colors
@carbon/grid Build layouts using the new 16 column grid system
@carbon/icons Iconography assets. We also offer support in: React, Angular, Vue, and Svelte
@carbon/pictograms Pictogram assets. We also offer support in: React and Svelte
@carbon/layout Layout-based units and spacing scale
@carbon/motion Productive and expressive motion curves
@carbon/themes Color tokens available in the Carbon Design System, like $interactive-01
@carbon/type New type tokens used alongside IBM Plex

πŸ“š Documentation

πŸ™Œ Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide and our Developer Guide! πŸ‘€

Contributors


TJ Egan

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Josh Black

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Alessandra Davila

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Andrea N. Cardona

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Scott Strubberg

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Alison Joseph

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Anna Gonzales

🎨 πŸ‘€

jillianhowarth

πŸ–‹ 🎨 πŸ‘€

Lauren Rice

🎨 πŸ‘€

johnbister

🎨 πŸ‘€

Dominik Brugger

πŸ’» 🚧

Jan Hassel

πŸ’» πŸ“–

Alexander Lyon

πŸ’»

Rosie Z

πŸ’»

Abdul Rehman

πŸ’»

Nick Gong

πŸ’»

Nishith P

πŸ“–

Eric Charpentier

πŸ’»

Luiza Mendes

πŸ’» 🚧

Akmal Hakimi Mohd Zamri

πŸ’»

sanjitbauli

πŸ“–

Laszlo Moczo

πŸ’»

LMapes

πŸ–‹ πŸ“–

conradennis

🎨

Eric Liu

πŸ’» πŸ“–

Richard VΕ‘ianskΓ½

πŸ’»

Lee Chase

πŸ’» πŸ“–

Anton

πŸ’»

Panpan Lin

πŸ“–

Ashley Harrison

πŸ’»

Jen Downs

πŸ’» πŸ“– ️️️️♿️

Taylor Jones

πŸ’» πŸ“– ️️️️♿️

MIchael Dudley

🎨

David Bradshaw

πŸ’»

Simon Finney

πŸ’» ️️️️♿️

Attila Bartha

πŸ’»

λ°°ν•˜λžŒ

πŸ’»

Yohanna Gadelrab

πŸ“–

Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡

Oyinkan Oyetunmibi

πŸ“–

pbenson322

πŸ“–

Abbey Hart

πŸ’» πŸ“– ️️️️♿️

Lucas

πŸ’»

Dylan Klohr

πŸ“–

Gilli Sigurdsson

🎨

kennylam

πŸ’» ️️️️♿️

SΓ©bastien

πŸ’»

Dusan Milko

πŸ’»

Taras Polovyi

πŸ’»

Chris Connors

🎨 πŸ“–

David Conner

πŸ’» ️️️️♿️

Harish Mohanani

πŸ’»

Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️

s100

πŸ’»

Taranveer Virk

πŸ’»

Niall Cargill

πŸ“–

Matt Chapman

πŸ’»

Boston Cartwright

πŸ’»

DavidSCChen

πŸ’»

molyholy

πŸ’»

Scott Dickerson

πŸ’»

Evgeniy Podgaetskiy

πŸ’»

CassidyJensen

πŸ’» ️️️️♿️

Zsolt Lattmann

πŸ’»

Conrad Schmidt

πŸ’»

Ignacio Becerra

πŸ’»

Swapnil Patil

πŸ“–

Fei Z

πŸ’»

Ignas Ausiejus

πŸ“–

Ryan O. Mackey

πŸ’»

DΓ‘vid HalΓ‘sz

πŸ’»

Bill Guigue

πŸ’»

szymonbrandys

πŸ’»

Adam Alston

πŸ“–

Krithika S Udupa

πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

πŸ“ License

Licensed under the Apache 2.0 License.