IBM Design System

---

version: alpha

name: IBM-design-analysis

description: "An enterprise-marketing canvas faithful to Carbon Design System: white surfaces, charcoal type, IBM Blue (#0f62fe) as the single confident accent, and a deliberately flat-square aesthetic where corners stay at 0–4px. Type runs IBM Plex Sans at light weight 300 for display sizes (a brand signature) and 400/600 for body and emphasis. Cards live as thin-bordered tiles with no shadow; sections separate via subtle gray rows. The chrome is square, the typography is light, and the only color in the system is one assertive blue — the result reads as old-world enterprise gravitas reframed for the cloud era."

colors:

primary: "#0f62fe"

on-primary: "#ffffff"

ink: "#161616"

ink-muted: "#525252"

ink-subtle: "#8c8c8c"

canvas: "#ffffff"

surface-1: "#f4f4f4"

surface-2: "#e0e0e0"

inverse-canvas: "#161616"

inverse-surface-1: "#262626"

inverse-ink: "#ffffff"

inverse-ink-muted: "#c6c6c6"

hairline: "#e0e0e0"

hairline-strong: "#161616"

blue-60: "#0043ce"

blue-80: "#002d9c"

blue-hover: "#0050e6"

semantic-success: "#24a148"

semantic-warning: "#f1c21b"

semantic-error: "#da1e28"

semantic-info: "#0f62fe"

typography:

display-xl:

fontFamily: IBM Plex Sans

fontSize: 76px

fontWeight: 300

lineHeight: 1.17

letterSpacing: -0.5px

display-lg:

fontFamily: IBM Plex Sans

fontSize: 60px

fontWeight: 300

lineHeight: 1.17

letterSpacing: -0.4px

display-md:

fontFamily: IBM Plex Sans

fontSize: 42px

fontWeight: 300

lineHeight: 1.20

letterSpacing: 0

headline:

fontFamily: IBM Plex Sans

fontSize: 32px

fontWeight: 400

lineHeight: 1.25

letterSpacing: 0

card-title:

fontFamily: IBM Plex Sans

fontSize: 24px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0

subhead:

fontFamily: IBM Plex Sans

fontSize: 20px

fontWeight: 400

lineHeight: 1.40

letterSpacing: 0

body-lg:

fontFamily: IBM Plex Sans

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

body:

fontFamily: IBM Plex Sans

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0.16px

body-sm:

fontFamily: IBM Plex Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.29

letterSpacing: 0.16px

body-emphasis:

fontFamily: IBM Plex Sans

fontSize: 14px

fontWeight: 600

lineHeight: 1.29

letterSpacing: 0.16px

caption:

fontFamily: IBM Plex Sans

fontSize: 12px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0.32px

button:

fontFamily: IBM Plex Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.29

letterSpacing: 0.16px

eyebrow:

fontFamily: IBM Plex Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.29

letterSpacing: 0.16px

rounded:

none: 0px

xs: 2px

sm: 4px

md: 6px

lg: 8px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 12px 16px

button-primary-pressed:

backgroundColor: "{colors.blue-80}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.none}"

button-secondary:

backgroundColor: "{colors.ink}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 12px 16px

button-tertiary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 12px 16px

button-ghost:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 12px 16px

button-danger:

backgroundColor: "{colors.semantic-error}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.none}"

padding: 12px 16px

feature-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 24px

feature-card-elevated:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 24px

product-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 32px

hero-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-md}"

rounded: "{rounded.none}"

padding: 48px

cta-banner:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.headline}"

rounded: "{rounded.none}"

padding: 48px

text-input:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 11px 16px

text-input-focused:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 11px 16px

text-input-error:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 11px 16px

newsletter-input:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.none}"

padding: 11px 16px

product-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 16px 20px

product-tab-selected:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-emphasis}"

rounded: "{rounded.none}"

padding: 16px 20px

resource-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 16px

customer-logo-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.none}"

padding: 24px

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

height: 48px

utility-bar:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.none}"

height: 32px

footer:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.inverse-ink-muted}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 64px 32px

---

IBM's marketing system is a faithful application of **Carbon Design System** — IBM's open-source enterprise design system. The dominant surface is `{colors.canvas}` pure white with `{colors.surface-1}` light gray for elevation, charcoal `{colors.ink}` (#161616) for text, and IBM Blue `{colors.primary}` (#0f62fe) as the single brand accent.

The defining choice is **flat geometry**: every CTA, every card, every input, every container uses square corners (`{rounded.none}` 0px) with thin 1px borders. There are no rounded pills, no soft shadows, no atmospheric gradients. The system is engineered, not stylized.

**IBM Plex Sans** carries the entire type hierarchy. Display sizes (76 / 60 / 42px) run at weight **300** — IBM's signature light display treatment that makes 76px feel calmer than competing brands' 700-weight display. Body type sits at weight 400 with `letter-spacing: 0.16px` (a Carbon precision detail) and line-height 1.50. The voice reads as careful, technical, and trustworthy.

The system reaches for color rarely — IBM Blue marks links, primary CTAs, and the rare full-bleed CTA banner. Charcoal carries every other surface that isn't white. The result is enterprise gravitas without the enterprise stiffness: rigorous, light-weighted, and intentionally restrained.

**Key Characteristics:**

> Source pages: ibm.com (home), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, community.ibm.com.

The same family carries display, body, and caption — there is no display + body pairing. Hierarchy is carried by **size + weight** rather than by family change. Plex Sans is also free / open-source under the SIL Open Font License — making it the easiest custom face on this list to substitute for in implementation.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 76px | 300 | 1.17 | -0.5px | Largest hero headline |

| `{typography.display-lg}` | 60px | 300 | 1.17 | -0.4px | Section opener headlines |

| `{typography.display-md}` | 42px | 300 | 1.20 | 0 | Sub-section headlines, hero card title |

| `{typography.headline}` | 32px | 400 | 1.25 | 0 | Card collection heading, FAQ category |

| `{typography.card-title}` | 24px | 400 | 1.33 | 0 | Feature card title |

| `{typography.subhead}` | 20px | 400 | 1.40 | 0 | Lead body next to display headlines |

| `{typography.body-lg}` | 18px | 400 | 1.50 | 0 | Hero subhead, lead paragraphs |

| `{typography.body}` | 16px | 400 | 1.50 | 0.16px | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.29 | 0.16px | Card body, footer columns |

| `{typography.body-emphasis}` | 14px | 600 | 1.29 | 0.16px | Selected tab label, emphasized body line |

| `{typography.caption}` | 12px | 400 | 1.33 | 0.32px | Captions, meta, utility bar |

| `{typography.button}` | 14px | 400 | 1.29 | 0.16px | All button labels |

| `{typography.eyebrow}` | 14px | 400 | 1.29 | 0.16px | Section eyebrows (Carbon avoids strong eyebrows; uses sentence case 14px) |

IBM Plex Sans is **free and open-source** (SIL OFL license) and available on Google Fonts. It is the recommended implementation. The Plex family also includes Plex Mono and Plex Serif if expanded typographic needs arise.

Carbon uses precise alignment to a 4-pixel grid as its whitespace system. Sections separate via thin gray rows (`{colors.surface-1}`) rather than via large vertical gaps. Content is dense by design — IBM's customers expect to see a lot on a page, not a lot of air.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Default for body type, hero text, footer body |

| 1 (hairline) | 1px `{colors.hairline}` border on canvas | Feature cards, inputs, list items |

| 2 (surface lift) | `{colors.surface-1}` background on canvas | Alternate-row banners, hovered cards |

| 3 (focus ring) | 2px `{colors.primary}` outline + 1px `{colors.hairline-strong}` underline | Focused input, focused button |

Carbon resists drop shadows on marketing — depth is carried by surface change and 1px hairlines. The exception is product / app surfaces (Carbon documents shadow tokens for elevated panels), but the marketing site barely uses them.

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Default — every button, card, input, container |

| `{rounded.xs}` | 2px | Small badges (rare exception) |

| `{rounded.sm}` | 4px | Avatar circles squared, dropdown menus |

| `{rounded.md}` | 6px | (Used rarely; documented for completeness) |

| `{rounded.lg}` | 8px | (Used rarely; documented for completeness) |

| `{rounded.pill}` | 9999px | Status pills, badges in product UI (rare on marketing) |

The brand commits to flat 0px corners. The other tokens exist for product / mobile surfaces but rarely surface on marketing.

**`button-primary`** — Blue solid CTA. The default primary across all pages.

**`button-secondary`** — Charcoal solid button — Carbon's "secondary" treatment.

**`button-tertiary`** — White button with blue 1px border + blue text. Used for tertiary CTAs.

**`button-ghost`** — Plain text + chevron, no background until hover.

**`button-danger`** — Carbon's destructive variant.

**`feature-card`** — Default feature highlight tile on the home and product pages.

**`feature-card-elevated`** — Same shape on `{colors.surface-1}` ground — used for "Recommended" cards in the latest-content carousel.

**`product-card`** — Larger product showcase tile.

**`hero-card`** — Hero composition card with light-weight title, body, and CTA.

**`cta-banner`** — Full-width blue CTA panel near the bottom of the page.

**`resource-tile`** — Smaller article / case-study tile.

**`customer-logo-tile`** — Single tile in the customer marquee on the home page (Ferrari, Pfizer, etc.).

**`text-input`** + **`text-input-focused`** + **`text-input-error`** — Carbon's input chrome.

**`newsletter-input`** — The "Stay connected" newsletter capture on the home page.

**`product-tab`** + **`product-tab-selected`** — The horizontal tab strip on product pages and the home "Recommended" carousel.

**`top-nav`** — Sticky white bar with the IBM logomark left, nav categories center, and search / sign-in icons right.

**`utility-bar`** — Slim gray ribbon above the top nav with location switch, contact, search shortcuts.

**`footer`** — Charcoal footer (`{colors.inverse-canvas}`) with the IBM wordmark left and 5–6 columns of caption-sized links. The only inverted surface above the page break.

| Name | Width | Key Changes |

|---|---|---|

| Max | 1584px | Carbon max grid; gutters expand |

| Desktop-XL | 1312px | Default desktop layout |

| Desktop | 1056px | Card grid 4-up maintained |

| Tablet | 672px | Card grid 4-up → 2-up; nav becomes hamburger |

| Mobile | 320px | Single-column; display-xl scales 76px → ~32px |

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. Default body to `{typography.body}` at weight 400 with `letter-spacing: 0.16px`. Don't remove the tracking.

3. When introducing a new section, decide whether it sits on `{colors.canvas}` (default) or on `{colors.surface-1}` (alternate band). The two-surface rhythm is the rhythm.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new variants as separate component entries (`button-primary-pressed`, `text-input-error`, `text-input-focused`).

6. Treat IBM Blue as scarce: links, primary CTA, CTA banner, focus underline. Anything beyond that is drift.

7. Resist rounded corners. If a designer pushes for 4px rounding, the brand is shifting away from Carbon.