Design System Analysis of IBM

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. Plex Sans at weight 300 carries display sizes — IBM's typographic signature.

01 — Color Palette

Palette

Brand & Accent
IBM Blue
#0f62fe
Single brand accent — primary CTAs, links, focus rings.
Blue 60
#0043ce
Hovered link state.
Blue 80
#002d9c
Pressed primary button.
Surface
Canvas
#ffffff
Default page background.
Surface 1
#f4f4f4
Light gray — input fields, alt-row stripes, subtle bands.
Surface 2 / Hairline
#e0e0e0
Card borders, disabled fields, dividers.
Inverse Canvas
#161616
Footer surface — only dark surface on the page.
Text
Ink
#161616
Headlines and emphasized body type.
Ink Muted
#525252
Secondary type — meta, sub-headlines.
Ink Subtle
#8c8c8c
Tertiary type — disabled, helper text, captions.
Semantic
Success Green
#24a148
Carbon green-50 — success states.
Warning Yellow
#f1c21b
Carbon yellow-30 — warning states.
Error Red
#da1e28
Carbon red-60 — error states; danger button.
02 — Typography Scale

Typography

display-xl76px · 300 · 1.17 · -0.5px · IBM Plex Sans
Meet Bob, your SDLC partner
display-lg60px · 300 · 1.17 · -0.4px
Smarter business. Real impact.
display-md42px · 300 · 1.20 · 0
Enterprise technology
headline32px · 400 · 1.25
Card collection heading
card-title24px · 400 · 1.33
Feature card title
subhead20px · 400 · 1.40
Lead body next to display headlines
body-lg18px · 400 · 1.50
Hero subhead and lead paragraphs.
body16px · 400 · 1.50 · 0.16px
Default body — Carbon's signature 0.16px positive tracking is part of the typographic voice.
body-sm14px · 400 · 1.29 · 0.16px
Card body, footer columns.
body-emphasis14px · 600 · 1.29 · 0.16px
Selected tab label, emphasized body
caption12px · 400 · 1.33 · 0.32px
Captions and meta
button14px · 400 · 1.29 · 0.16px
Sign up
03 — Button Variants

Buttons

button-primary
button-primary-pressed
button-secondary
button-tertiary
button-ghost
button-danger
04 — Cards & Containers

Cards

feature-card

AI assistants

Plan and drive complex projects with intelligent agents and assistants.

Explore →
feature-card

Data management

Trusted data you need to power your most-critical AI initiatives.

Explore →
feature-card

Security & governance

AI safeguards to protect your most-critical data and scale with confidence.

Explore →
feature-card-elevated

Integrated resilience

Modernize and protect your business operations from cyber threats.

Explore →

Hero composition card

A larger atmospheric tile with light-weight title, body, and CTA. Used as the centerpiece of feature pages.

Ready to do enterprise right?

Get started in minutes with a free IBM Cloud account.

resource-tile
Resource title
Article · 4 min read
FERRARI
PFIZER
US OPEN
product-tab + product-tab-selected
Overview
Features
Pricing
Resources
05 — Form Elements

Forms

06 — Spacing Scale

Spacing

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
07 — Border Radius Scale

Radius

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

none · 0px (default)
xs · 2px
sm · 4px
md · 6px
lg · 8px
pill · 9999
08 — Elevation & Depth

Elevation

Level 0 — flat
Level 1 — hairline
Level 2 — surface lift
Level 3 — focus ring
09 — Responsive Behavior

Responsive

NameWidthKey Changes
Max1584pxCarbon max grid; gutters expand
Desktop-XL1312pxDefault desktop layout
Desktop1056pxCard grid 4-up maintained
Tablet672pxCard grid 4-up → 2-up; nav becomes hamburger
Mobile320pxSingle-column; display-xl scales 76px → ~32px
320
672
1056
1312
1584
Touch Targets
  • Carbon spec: 48px minimum tap target across viewports.
  • Top-nav links grow from 36px to 48px on touch.
  • Tab strip rows hold 48px tap height.
Collapsing Strategy
  • Top nav collapses to hamburger below 672px.
  • Utility bar hides below 672px.
  • Card grid: 4-up → 2-up at 1056px → 1-up below 672px.
  • Footer: 6-column → 3-column → 1-column.