IBM Carbon Design System

# Carbon — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-tokens-package
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/carbon-design
sources:
  - https://www.carbondesignsystem.com/
  - https://carbondesignsystem.com/elements/color/tokens/
  - https://carbondesignsystem.com/elements/typography/type-sets/
  - https://github.com/carbon-design-system/carbon
  - https://carbondesignsystem.com/designing/kits/figma/
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by IBM. "Carbon" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Carbon
**Owner:** IBM
**Official documentation:** https://www.carbondesignsystem.com/
**Visual character:** Square-cornered, grid-obsessed IBM engineering: Plex everywhere, one electric blue, and a spacing scale you can set a watch by.

---

## Summary

Open, enterprise-grade system with serious engineering depth.

_Editorial confidence: high. Values are drawn from well-documented public token references. Values checked against the exact Carbon packages recorded in the evidence on 2026-09-05. Colors describe the White theme; rem sizes remain relative to the document root. Unreviewed radius, shadow and descriptive fields remain unknown. Field-level evidence: 36/89 claims source-linked, 36/89 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=carbon-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Interactive / Blue 60 | `#0f62fe` | `--cds-interactive` | Primary interactive color — buttons, links, focus |
| Text Primary / Gray 100 | `#161616` | `--cds-text-primary` | Primary body text |
| Background | `#ffffff` | `--cds-background` | Default page background (White theme) |
| Layer 01 / Gray 10 | `#f4f4f4` | `--cds-layer-01` | First layered surface (tiles, fields) |
| Border Subtle 01 / Gray 30 | `#c6c6c6` | `--cds-border-subtle-01` | Subtle border on layer 01 (White theme) |
| Text Secondary / Gray 70 | `#525252` | `--cds-text-secondary` | Secondary text |
| Support Error / Red 60 | `#da1e28` | `--cds-support-error` | Errors and destructive actions |
| Support Success / Green 50 | `#24a148` | `--cds-support-success` | Success states |
| Support Warning / Yellow 30 | `#f1c21b` | `--cds-support-warning` | Warnings |

## Typography

- **Display:** IBM Plex Sans — weights 300, 400, 600 — `'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`
- **Body:** IBM Plex Sans — weights 400, 600 — `'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`
- **Mono:** IBM Plex Mono — weights 400 — `'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-07 | `3.375rem` | `1.199` |
| heading-05 | `2rem` | `1.25` |
| heading-03 | `1.25rem` | `1.4` |
| body-02 | `1rem` | `1.5` |
| body-01 | `0.875rem` | `1.42857` |
| label-01 | `0.75rem` | `1.33333` |

## Spacing

Base unit: `8px (with 2px mini-units)`

Scale: `0.125rem` · `0.25rem` · `0.5rem` · `0.75rem` · `1rem` · `1.5rem` · `2rem` · `2.5rem` · `3rem`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |
| field (v11 optional) | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| overlay | `0 2px 6px rgba(0,0,0,0.3)` |

## Motion

| Name | Value |
| --- | --- |
| fast-01 | `70ms` |
| moderate-02 | `240ms` |
| standard-easing | `cubic-bezier(0.2, 0, 0.38, 0.9)` |

## Quick start (CSS)

```css
/* Carbon — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://www.carbondesignsystem.com/
   Reference scope: Values checked against the exact Carbon packages recorded in the evidence on 2026-09-05. Colors describe the White theme; rem sizes remain relative to the document root. Unreviewed radius, shadow and descriptive fields remain unknown.
   Field evidence: https://www.designsystems.one/api/style-spec?system=carbon-design */

:root {
  /* Color */
  --cds-interactive: #0f62fe; /* Primary interactive color — buttons, links, focus */
  --cds-text-primary: #161616; /* Primary body text */
  --cds-background: #ffffff; /* Default page background (White theme) */
  --cds-layer-01: #f4f4f4; /* First layered surface (tiles, fields) */
  --cds-border-subtle-01: #c6c6c6; /* Subtle border on layer 01 (White theme) */
  --cds-text-secondary: #525252; /* Secondary text */
  --cds-support-error: #da1e28; /* Errors and destructive actions */
  --cds-support-success: #24a148; /* Success states */
  --cds-support-warning: #f1c21b; /* Warnings */

  /* Typography */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;

  /* Type scale */
  --text-heading-07: 3.375rem; /* line-height 1.199 */
  --text-heading-05: 2rem; /* line-height 1.25 */
  --text-heading-03: 1.25rem; /* line-height 1.4 */
  --text-body-02: 1rem; /* line-height 1.5 */
  --text-body-01: 0.875rem; /* line-height 1.42857 */
  --text-label-01: 0.75rem; /* line-height 1.33333 */

  /* Spacing */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Radius */
  --radius-default: 0;
  --radius-field-v11-optional-: 4px;

  /* Elevation */
  --shadow-overlay: 0 2px 6px rgba(0,0,0,0.3);

  /* Motion */
  --motion-fast-01: 70ms;
  --motion-moderate-02: 240ms;
  --motion-standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
}
```

## Origin

IBM open-sourced Carbon in 2017. It absorbed lessons from earlier IBM design languages and aligns with the IBM Design Language. Carbon ships across web (React, Angular, Vue, Svelte, vanilla), iOS, and Android.

## Governance

IBM design and engineering teams own the system; community contributions accepted through GitHub. Strong RFC discipline and explicit deprecation policy. Open-source with a public roadmap.

## Known for

- Strong cross-framework support — Carbon ships first-class libraries for React, Angular, Vue, Svelte, and Web Components.
- Public design tokens with a clear primitive-vs-semantic structure.
- Detailed motion language with documented duration and easing tokens.

## Underrated

- The data visualization tokens and component family (Carbon Charts) are an underused asset.
- Carbon's grid system is genuinely flexible and well-documented.

## Watch out for

- Visual identity is intentionally enterprise — bringing Carbon to a consumer product means significant retheming.
- API surface area is large; full adoption is a real commitment.

## Components worth studying

- **DataTable** — Sortable, filterable, expandable grid that scales to enterprise data volumes.
- **Notification** — Toast and inline notifications with clear severity and dismissal patterns.
- **Tile** — Composable surface with selectable, expandable, and clickable variants.

## When to choose Carbon

Pick Carbon if you're building enterprise tools that need to look serious, work across many frameworks, and survive a security review. Don't pick it for a consumer-facing brand-led product.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Carbon by IBM — Open, enterprise-grade system with serious engineering depth. Character: Square-cornered, grid-obsessed IBM engineering: Plex everywhere, one electric blue, and a spacing scale you can set a watch by. Use a primary colour near #0f62fe, the typeface "IBM Plex Sans" (or a close equivalent), corner radius around 0, a spacing rhythm on a 8px (with 2px mini-units) base. Lean into what it's known for: Strong cross-framework support — Carbon ships first-class libraries for React, Angular, Vue, Svelte, and Web Components. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Carbon docs](https://www.carbondesignsystem.com/)
- [Carbon on GitHub](https://github.com/carbon-design-system/carbon)
- [Tokens reference](https://www.carbondesignsystem.com/guidelines/color/tokens/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/carbon-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._