IBM Carbon v11

---
name: ibm-carbon-v11
description: Apply the IBM Carbon v11 visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" IBM Carbon v11, mentions Carbon Design System, IBM Carbon, carbon v11, or describes IBM Plex Sans everywhere, blue-60 #0f62fe interactive color, square corners and flat surfaces — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# IBM Carbon v11 Design System

IBM's open-source enterprise design system: IBM Plex typography, the blue-60 #0f62fe interactive color, square-cornered components, a 2x spacing grid, role-based color tokens, and four official themes (White, Gray 10, Gray 90, Gray 100). Built for dense, data-heavy B2B products.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as IBM Carbon v11.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Carbon Design System, IBM Carbon, carbon v11, IBM design language), or describes its traits: IBM Plex Sans everywhere; blue-60 #0f62fe interactive color; square corners and flat surfaces; role-based token layering; dense data tables; 2px focus outlines.

## Design tokens

### Color palette

- background — White theme page background: `#ffffff` (--color-bg)
- layer-01 — gray-10 field and tile background: `#f4f4f4` (--color-surface)
- text-primary — gray-100: `#161616` (--color-text)
- text-secondary — gray-70: `#525252` (--color-text-muted)
- interactive / link-primary — blue-60: `#0f62fe` (--color-accent)
- button-primary-hover — blue-70: `#0043ce` (--color-accent-hover)
- border-subtle-01 — gray-20: `#e0e0e0` (--color-border)
- support-error — red-60: `#da1e28` (--color-error)
- support-success — green-50: `#24a148` (--color-success)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- Gray 100 theme background: `#161616` (--color-bg)
- layer-01 in Gray 100 — gray-90: `#262626` (--color-surface)
- text-primary on dark — gray-10: `#f4f4f4` (--color-text)
- text-secondary on dark — gray-30: `#c6c6c6` (--color-text-muted)
- link-primary on dark — blue-40: `#78a9ff` (--color-accent)
- border-subtle on dark — gray-80: `#393939` (--color-border)

### Typography

- Display / headings: IBM Plex Sans (fallback: Helvetica Neue, Arial, sans-serif)
- Body: IBM Plex Sans (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Menlo, Consolas, monospace)
- Type scale: 1.125 ratio, base 14px — computed steps: 14px / 16px / 18px / 20px / 22px / 25px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.25, letter-spacing 0
- Body: line-height 1.43, letter-spacing 0.16px

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 32, 48, 64 — Productive density: the 2x mini-unit scale (spacing-01 2px through spacing-10 64px) keeps data tables and forms compact; 16px is the default gutter inside components, 32–48px between page sections.
- Border radius: none 0px, sm 4px, md 8px — Carbon is fundamentally square. Buttons, tiles, and inputs ship with 0px corners; small radii appear only on tags, toggles, and a few v11 expressive variants.
- Border treatment: 1px solid #e0e0e0 — Subtle 1px borders separate layers; inputs use a 1px bottom border on a gray-10 field. Focus is always a 2px #0f62fe outline.

### Shadows

- none: `none` — Default — Carbon surfaces are flat and separate by layer color, not elevation
- overlay: `0 2px 6px rgba(0, 0, 0, 0.3)` — Dropdown menus, tooltips, and modal dialogs only

### Layout

- Max content width: 1584px
- 16-column 2x grid with 32px gutters, max width 1584px
- UI shell: 48px top header bar plus optional 256px left side-nav
- Data tables are first-class citizens — full-bleed within their tile, zebra-free, 48px rows
- Forms stack labels above fields with 12px label gaps

### Effects

- Layer model: each stacked surface steps one gray token lighter/darker instead of casting shadows
- Skeleton loading states shimmer in gray-20

### Motion

- Easing: cubic-bezier(0.2, 0, 0.38, 0.9); durations 70ms / 150ms / 400ms
- Productive easing (0.2, 0, 0.38, 0.9) for functional UI; expressive easing cubic-bezier(0.4, 0.14, 0.3, 1) reserved for celebratory moments
- Micro-interactions at 70–110ms, panel expansion at 150–240ms, page-level at 400ms+
- Motion is strictly functional — no decorative animation

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-text: #161616;
  --color-text-muted: #525252;
  --color-accent: #0f62fe;
  --color-accent-hover: #0043ce;
  --color-border: #e0e0e0;
  --color-error: #da1e28;
  --color-success: #24a148;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-overlay: 0 2px 6px rgba(0, 0, 0, 0.3);
  --border-default: 1px solid #e0e0e0;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;
  --text-base: 14px;
  --leading-heading: 1.25;
  --leading-body: 1.43;
  --tracking-heading: 0;
  --tracking-body: 0.16px;
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --duration-fast: 70ms;
  --duration-base: 150ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 48px UI-shell header in gray-100 (#161616) regardless of theme, white IBM Plex text, square hover blocks; optional side-nav rail with 32px rows
- **Hero:** Product pages lead with a plain-language heading in IBM Plex Sans Light (300) at 42–54px, left-aligned on the grid, with a blue-60 primary button below — no decoration
- **Card:** Carbon 'tile': layer-01 background (#f4f4f4), 0px radius, no shadow, 16px padding, optional 1px border-subtle
- **Button (primary):** Blue-60 fill, white text, 0px radius, 48px tall, text left-aligned with 16px padding and 64px min right padding; hover blue-70, focus 2px blue outline inset by 1px white
- **Button (secondary):** Gray-80 fill (or tertiary: transparent with 1px blue-60 border and blue text), same square geometry
- **Form fields:** Label 12px above; input on gray-10 field (#f4f4f4) with 1px gray-50 bottom border only, 0px radius, 40–48px tall; focus swaps to 2px blue-60 outline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Squared-off, left-aligned components on a strict 2x grid — the primary button is a sharp-cornered blue-60 rectangle with text pinned to the left edge and generous right padding, outlined in a 2px blue focus ring when active. Spend boldness here; keep everything else quiet.

## Do

- Use the role-based tokens (text-primary, layer-01, border-subtle) rather than raw gray values so themes swap cleanly
- Keep corners square and align every element to the 2x spacing grid
- Left-align button labels and text — Carbon is rigorously flush-left
- Express surface hierarchy with layer tokens, not shadows

## Don't

- Don't round corners beyond the few sanctioned components — pill buttons instantly break the industrial voice
- Don't substitute another typeface for IBM Plex; the system is inseparable from it
- Don't use v10 values (#0062ff interactive, #171717 bg) — v11 moved to #0f62fe and #161616
- Don't center content or add decorative gradients

## Accessibility notes

- Carbon's published token pairs are contrast-tested: text-primary #161616 on white is 16.7:1 and blue-60 #0f62fe passes AA on white — keep the pairs intact when theming
- Always render the 2px focus outline; keyboard navigation is a core Carbon requirement
- In Gray 90/100 themes use the dark-theme link color blue-40 #78a9ff, not blue-60, to keep AA contrast

## Reference sites

- Carbon Design System: https://carbondesignsystem.com
- Carbon color tokens: https://carbondesignsystem.com/elements/color/tokens/
- IBM Design Language: https://www.ibm.com/design/language/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip ibm-carbon-v11.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/ibm-carbon-v11.json

Settings → Capabilities → Skills → Upload skill → ibm-carbon-v11.zip