# Carbon Design System (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.

- IndexStyle No.554 — https://indexstyle.org/styles/carbon-design-system
- Kind: Style · Family: Platform Screen Languages · Era: 2015–
- Mood: Technique, Trust, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Use IBM Plex with compact labels and a clearly stepped hierarchy.
- Layout & structure: Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct.
- Material & texture: Build with neutral layers, fine borders and blue only for interaction.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F4F4F4
- The colour it is remembered by: #0F62FE
- Text and outlines: #161616

## What to avoid

Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: IBM Plex and strong type hierarchy
- [ ] Visible in the piece: White or deep-gray work surfaces
- [ ] Visible in the piece: Dense tables, filters and side navigation
- [ ] Visible in the piece: Blue reserved for action and focus
- [ ] The layout follows: Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct.
- [ ] The lettering follows: Use IBM Plex with compact labels and a clearly stepped hierarchy.
- [ ] The material and surface follow: Build with neutral layers, fine borders and blue only for interaction.
- [ ] The colour relation holds: #F4F4F4 as ground, #0F62FE carrying the style, #161616 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **GitHub Primer (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. → https://indexstyle.org/styles/github-primer
- **Swiss (スイス・スタイル)** — Puts order front and center and makes the information itself the protagonist. → https://indexstyle.org/styles/swiss

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=carbon-design-system+github-primer

## Further study

- Carbon 2x grid
- IBM Plex
- Component status and accessibility

## Reference works

- IBM Carbon Design System — What is Carbon? — https://carbondesignsystem.com/all-about-carbon/what-is-carbon/

## Source of record

- IBM Carbon Design System — What is Carbon? — https://carbondesignsystem.com/all-about-carbon/what-is-carbon/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/carbon-design-system
- Image-generation prompt (legally clean): https://indexstyle.org/styles/carbon-design-system/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)