Carbon Design System vs GitHub Primer
Carbon Design System / GitHub Primer
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.
GitHub Primer
GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.
| Carbon Design System | GitHub Primer | |
|---|---|---|
| Era | 2015– | 2017– |
| 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 | Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density |
| Best used for | Enterprise software with many states and permissions · Keeping analytics, operations and forms coherent across products | Developer SaaS and admin tools that must hold many states and actions on one screen · Keeping information density and accessibility consistent across product teams |
| Type | Use IBM Plex with compact labels and a clearly stepped hierarchy. | Use one plain sans for body and labels; build hierarchy through weight and color. |
| Composition | Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct. | Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set. |
| Material | Build with neutral layers, fine borders and blue only for interaction. | Start from neutrals; reserve blue for links and semantic colors for success, warning and danger. |
| Caution | Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system. | Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority. |