Carbon Design System vs GitLab Pajamas
Carbon Design System / GitLab Pajamas
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.
GitLab Pajamas
GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.
| Carbon Design System | GitLab Pajamas | |
|---|---|---|
| Era | 2015– | 2018– |
| 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 | GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus |
| Best used for | Enterprise software with many states and permissions · Keeping analytics, operations and forms coherent across products | Products spanning code through deployment · Reading long identifiers, status, diffs and actions across light and dark themes |
| Type | Use IBM Plex with compact labels and a clearly stepped hierarchy. | Use GitLab Sans for interface copy and GitLab Mono for branches, commit IDs and code, centered on weights 400 and 600. |
| Composition | Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct. | Keep application chrome stable and open main and supporting panels according to the current work. |
| Material | Build with neutral layers, fine borders and blue only for interaction. | Model depth with neutrals, reserve purple for brand affinity, and assign blue, red and green to stable action and status meanings. |
| Caution | Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system. | Orange and the tanuki do not make a screen Pajamas. Preserve hierarchy when code, status and discussion share the same view. |