Carbon Design System

Carbon Design System / 2015– / Style / Platform Screen Languages

IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.

IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus

Images at the source page

Dictionary entry

Best used for: Enterprise software with many states and permissions · Keeping analytics, operations and forms coherent across products
Type: Use IBM Plex with compact labels and a clearly stepped hierarchy.
Composition: Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct.
Material: Build with neutral layers, fine borders and blue only for interaction.
Caution: Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system.
Further study: Carbon 2x grid / IBM Plex / Component status and accessibility

Related entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/carbon-design-system
Markdown: [Carbon Design System — IndexStyle](https://indexstyle.org/styles/carbon-design-system)
HTML: <a href="https://indexstyle.org/styles/carbon-design-system">Carbon Design System — IndexStyle</a>

Back to index position