Carbon Design System vs PatternFly
Carbon Design System / PatternFly
Both sit in Platform Screen Languages, so the question is not what they belong to but how they behave. They are reached for with some of the same intent, which is where they get confused.
Carbon Design System
IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.
PatternFly
Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.
| Carbon Design System | PatternFly | |
|---|---|---|
| Era | 2015– | 2012– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| Cues | IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus | Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes |
| Best used for | Enterprise software with many states and permissions · Keeping analytics, operations and forms coherent across products | Administration products for cloud, containers and networks · Giving a suite of enterprise products one density, navigation and status language |
| Type | Use IBM Plex with compact labels and a clearly stepped hierarchy. | Keep headings, body and table labels to a small hierarchy; distinguish values and code with monospace. |
| Composition | Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct. | Separate dark shell, left navigation, work surface and an on-demand detail pane. |
| Material | Build with neutral layers, fine borders and blue only for interaction. | Use white and pale gray broadly, blue for action and saturated color only for alerts and status. |
| Caution | Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system. | Packing cards and tables together is not enough. Make current location and the priority of abnormal states obvious first. |