Carbon Design System vs SAP Fiori
Carbon Design System / SAP Fiori
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.
SAP Fiori
SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.
| Carbon Design System | SAP Fiori | |
|---|---|---|
| Era | 2015– | 2013– |
| 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 | Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces |
| Best used for | Enterprise software with many states and permissions · Keeping analytics, operations and forms coherent across products | Enterprise workflows that differ by user role · Connecting overview, object detail and task completion |
| Type | Use IBM Plex with compact labels and a clearly stepped hierarchy. | Use concise business labels and expose status with words as well as color. |
| Composition | Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct. | Move from overview to object page to focused task, preserving context throughout. |
| Material | Build with neutral layers, fine borders and blue only for interaction. | Use pale layers, restrained blue and semantic colors for status only. |
| Caution | Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system. | Putting every enterprise function on one screen defeats the role-based premise. Remove what the current task does not need. |