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.

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — AI-generated interpretation 1
AI-generated interpretation, not a reference work

At a glance

Visual 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

Best used for

  • Enterprise software with many states and permissions
  • Keeping analytics, operations and forms coherent across products

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.mdimage promptJSON APIMCP & machine accessCompose
open in ChatGPTopen in Claudeopen in Google AI
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

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

More from Platform Screen Languages

Continue through styles in the same Platform Screen Languages family, prioritised by shared effects.

Browse all Platform Screen Languages 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