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

text-input · default
text-input · focused
text-input · error
newsletter-input
textarea
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

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

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.