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.

Getting started

If you’re just getting started, check out @carbon/react or @carbon/web-components.

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/react`	React components and styles
`@carbon/web-components`	Web Components
`@carbon/styles`	Sass styles for 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

:books: Documentation

See our documentation site here for full how-to docs and guidelines
Contributing: Guidelines for making contributions to this repo.
🏃‍♀️ Migration Guides

🙌 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

_{Taylor Jones} 💻 📖 ️️️️♿️	_{TJ Egan} 💻 📖 🚇 👀 ️️️️♿️	_{Alessandra Davila} 💻 📖 👀 ️️️️♿️	_{Andrea N. Cardona} 💻 📖 👀 ️️️️♿️	_{Francine Lucca} 💻 📖 👀 ️️️️♿️	_{Scott Strubberg} 💻 📖 👀 ️️️️♿️	_{Alison Joseph} 💻 📖 👀 ️️️️♿️
_{Anna Gonzales} 🎨 👀	_{Lauren Rice} 🎨 👀	_{Josh Black} 💻 📖 🚇 👀 ️️️️♿️	_DAK 💻 📖 👀 ️️️️♿️	_{Josefina Mancilla} 💻 📖 👀 ️️️️♿️	_emyarod 💻 📖 👀 ️️️️♿️	_{Eric Marcoux} 💻
_{Vince Picone} 💻 📖 👀 ️️️️♿️	_{jillianhowarth} 🖋 🎨 👀	_{Ricardo Henriquez} 💻 📖 👀 ️️️️♿️	_johnbister 🎨 👀	_{Dominik Brugger} 💻 🚧	_{Jan Hassel} 💻 📖 ️️️️♿️ 🎨	_{Alexander Lyon} 💻
_{Rosie Z} 💻	_{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} 💻 📖 ️️️️♿️	_{Abdul Rehman} 💻	_{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} 📖	_{Eshin Griffith} 💻	_{@RianTavaresOn} 💻 🎨	_ColbyJohnIBM 💻
_Håkon 💻 📖	_{Tanner Summers} 💻	_{Zhen Wang} 💻 📖	_{Cathal Kenneally} 💻	_{Joel Humberto Gómez Paredes} 💻	_{James Nash} 💻 📖	_{Jakub Faliszewski} 💻
_{Nick Gong} 💻	_{Hannele Valtanen} 💻	_Llam4u 💻 🐛	_{G. Torres} 💻	_Fiona 💻	_kindoflew 💻	_{Mario Gueyraud} 💻
_{Dongjoon Lee} 💻	_{ShankarV-CodeJunkie} 💻	_{dario platania} 💻	_{Mateusz Krzyżanowski} 💻	_jpsorensen 💻	_{jae kaplan} 🚇	_{Sierra Wetmore} 💻
_kcprevatt 💻	_{Marcin Lewandowski} 💻	_remolueoend 💻	_{Jesse Hull} 💻 ️️️️♿️	_{Ashvin Warrier} 💻	_GalvinGao 💻	_{Bianca Sparxs} 💻
_{Mahmoud Abdulazim} 💻	_{Dave Steinberg} 💻	_{Seong-Hyun Ryoo} 💻	_{Pratik Karad} 💻 ️️️️♿️	_Gerzon 💻	_{Guilherme Datilio Ribeiro} 💻 📖 ️️️️♿️ 👀	_{Josef Kubíček} 💻
_{Sunny Johal} 💻	_{Steven Black} 💻 ️️️️♿️	_{Mark Judy} 💻	_{Anton Tsymuk} 💻	_{Mohammed Aslam P. A.} 💻 📖	_{Tony ZL} 💻	_{Petr Kadlec} 💻
_{David Ragsdale} 💻	_{Hao Cheng} 💻	_cordesmj 💻	_{Aziz Chebbi} 💻	_{Michał Konopski} 💻	_{Omkar Ajagunde} 💻 📖	_{Aman Lajpal} 💻 📖
_{Niraj Sah} 💻	_{David Padilla} 💻	_{Allison Ishida} 💻	_{Alex Lewitt} 💻	_Tresau 💻	_{Daniel Castillo} 💻	_HaRuki 💻 📖
_{Matej Ocovsky} 💻	_{SamChinellato} 💻	_{stevenpatrick009} 💻	_HunterXalc 💻	_{Onur Özkardeş} 💻	_{Matias Borghi} 💻	_{Alexandr Ovchinnikov} 💻
_{J Thomas} 💻	_{Garrett Dawson} 💻 📖	_{Daniel Adebonojo} 📖	_{Anjana M R} 💻	_{Joseph Schultz} 💻	_anjaly0606 💻	_jesnajoseijk 💻
_{Jawahar S} 💻	_{Holly Springsteen} 💻	_{Nikhil Tomar} 💻	_{Anina Antony} 💻	_{Ahmed Semih Erkan} 💻	_{Yael Chavoya} 💻 📖	_{Kilian Collender} 💻
_{nandininarayanofficial} 💻	_{Andrea DG} 💻	_Luis 💻	_{Luke Harrison} 💻	_{Ahmed Alsinan} 💻	_{Nevan Tan} 💻	_{Ali Al Dobyan} 💻
_{Adam Shea} 💻	_{Md Nabeel Ayubee} 💻	_{Patan Amrulla Khan} 💻 📖	_{Noah Sgorbati} 💻 📖	_{Divya G} 💻	_{Soumya Raju} 💻	_{IRFAD KP} 💻	_{Mohammed Mikdhad C} 💻
_{IRFAD KP} 💻	_{ziyadzulfikar} 💻	_{IRFAD KP} 💻	_Mariat 💻	_{Thamjith Thaha} 💻	_{Zoë Gathercole} 💻	_{Ashna Thomas} 💻
_{Zach Tindall} 💻	_{Vsevolod Platunov} 💻	_{Heloise Lui} 💻 📖 ️️️️♿️ 👀	_{Daniel Smith} 💻 ️️️️♿️ 📖	_{enricobguedes} 💻