What is IBM's primary brand color?

IBM Blue — #0f62fe — is the single brand accent across the marketing system. It carries every primary CTA, every link, the focus underline on text inputs, and the full-bleed CTA banner near the page foot. There is no second brand color. The deeper Blue 60 (#0043ce) and Blue 80 (#002d9c) tokens exist only as hover and pressed states. Status semantics use green #24a148, yellow #f1c21b, and red #da1e28, but those are functional signals, not brand accents.

What typography does IBM use, and what's the substitute?

The entire system runs on IBM Plex Sans, IBM's open-source typeface released under the SIL Open Font License. Display sizes at 42–76px sit at weight 300 — the light-weight display treatment is the brand's typographic signature and the easiest detail to get wrong. Body runs at weight 400 with 0.16px letter-spacing (a Carbon precision detail). Plex Sans is on Google Fonts, so substitution is unnecessary; if you must swap, keep the weight 300 display treatment and the positive body tracking or the brand voice disappears.

Does IBM's marketing have a dark mode?

The marketing pages stay light. The only inverted surface above the page break is the charcoal footer at inverse-canvas #161616 with white text. Carbon does document a full Gray 100 dark theme used inside product surfaces (cloud-pak, watsonx, datacap), but it's a separate palette not extracted in this DESIGN.md. If you need dark-mode support, the Gray 100 theme lives in Carbon's documentation rather than in IBM's marketing chrome.

Why are IBM's corners completely flat?

Carbon commits to 0px radius on every button, card, input, and container as a brand stance. The system uses 1px hairlines and surface change for hierarchy instead of rounded corners and drop shadows. Even 4px rounding starts to break the look — pill buttons read as a different company entirely. The radius scale documents 2px through 9999px for product-side exceptions (badges, avatars), but marketing surfaces hold the line at 0px. The flat-square aesthetic is the brand.

How do I use this DESIGN.md in a React project?

Pass the file to Claude, Cursor, or Copilot inside your project and ask for components that follow the tokens. The agent will produce Plex Sans weight 300 headlines, square 0px corners, IBM Blue primary CTAs, and Carbon's 0.16px body tracking by default. You can also paste the YAML token values directly into Tailwind config, CSS custom properties, or a design-tokens.json file — every color, type style, and component entry is a quoted machine-readable value.

What's missing from this DESIGN.md spec?

Four areas, documented in the Known Gaps section. IBM's product surfaces (cloud-pak, watsonx, datacap) use richer Carbon components — data tables, breadcrumbs, contextual menus, graph cells — that aren't visible on the marketing pages and live in Carbon's documentation instead. Form-field error and validation styling was not rendered on the inspected surfaces. The Gray 100 dark theme is documented in Carbon but isn't exposed on marketing pages. And community.ibm.com runs a community-platform white-label that approximates Carbon without strict adherence — the spec applies to ibm.com proper.

IBM Design System

IBM's Carbon Design System as a DESIGN.md file.

About IBM DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source ibm.com

Developer Tools & IDEs
Backend, Database & DevOps

IBM's marketing chrome is a direct application of Carbon Design System, the company's open-source enterprise design language now in its tenth year of public iteration. The system commits to one idea above all others: restraint through engineering rigor. Surfaces are pure white #ffffff or a single step of light gray #f4f4f4. Type is charcoal #161616. The only chromatic accent is IBM Blue #0f62fe, used for links, primary CTAs, focus underlines, and the rare full-bleed CTA banner. Every corner sits at 0px. There are no soft shadows, no gradient panels, no pill-shaped buttons. The result reads as old-world enterprise gravitas reframed for the cloud era — careful, technical, trustworthy.

This page packages Carbon's marketing extraction into a single DESIGN.md file written to the Google Labs spec. Inside: 22 color tokens grouped into brand, surface, text, and semantic; 13 type styles built on IBM Plex Sans at three weights (300 for display, 400 for body, 600 for emphasis); 7 radius tokens led by 0px; 8 spacing tokens on a 4-pixel grid; and 28 component definitions covering buttons, cards, inputs, tabs, navigation, and the inverted charcoal footer. Every token is quoted and machine-readable.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent produces React components with Plex Sans weight 300 headlines, square-cornered buttons in IBM Blue, and Carbon's signature 0.16px body tracking — not a generic shadcn theme. Or reference the tokens directly in Tailwind config and CSS variables. The discipline of holding to one accent color and one type family while still reading as authoritative is the lesson worth studying — most enterprise sites cannot resist a second blue or a heavier display weight.

What makes it distinct

Flat-square geometryevery button, card, and input sits at 0px radius; 4px rounding would already feel off-brand
Light-weight display typePlex Sans at weight 300 for 76px headlines is the brand's typographic signature
Single accentIBM Blue (#0f62fe) carries every link, primary CTA, and CTA banner; no second brand color exists
Carbon precision tracking0.16px letter-spacing on 16px body is a deliberate Carbon detail, not a drift
Hairline depth1px borders and surface change replace drop shadows across 28 documented components

Live at ibm.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ibm.com

Explore IBM

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

IBM design system FAQ

Common questions about IBM's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Carbon Design System

IBM's open-source enterprise design system — the authoritative source for the tokens documented here.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use IBM in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→