Color Palette
Fill & Gradient Colors
Light Blue α
rgba(166,200,255,.64)
Typography
IBM Plex Sans · --font-family-2
IBM Plex Sans
At IBM, we develop technologies that solve the world's most complex challenges. IBM Plex is our corporate typeface.
Light · 300
Regular · 400
SemiBold · 600
IBM Plex Mono · --font-family-3
IBM Plex Mono
ibm.tz.job.code(input).run()
Regular · 400
Let's create
font-size-56px · 55.8px · Light · line-height: 66.4px · letter-spacing: 0.16px
Think forward
font-size-5xl · 42px · Light · line-height: 50px
Hybrid Cloud · AI · Quantum
font-size-4xl · 32px · Regular · line-height: 40px
IBM helps enterprises modernize their infrastructure, data and workflows.
font-size-2xl · 20px · Regular · line-height: 28px
Build enterprise AI, automate intelligently, and modernize with hybrid cloud.
font-size-base · 16px · Regular · line-height: 24px · letter-spacing: 0.16px
IBM · CLOUD · CONSULTING · AI
Caption · 12px · SemiBold · UPPERCASE · letter-spacing: 0.32px
Letter Spacing — Positive values (unique in this series)
IBM Design
letter-spacing-tight
0.16px — body text, headings
IBM CATEGORY LABEL
letter-spacing-normal
0.32px — uppercase labels, captions
IBM uses positive letter-spacing — both values are above 0. This contrasts with most design systems (Framer, Cursor, Expo) which use aggressive negative tracking. IBM Plex was designed with built-in optical harmony, so it doesn't need squeeze at display sizes.
Spacing
Spacing Scale
23 tokens — 1px → 352.555px (note: --space-24 = 430.5px is a hero layout outlier)
Borders
Border Radii
IBM's design language is characteristically rectilinear — the default is square corners. Asymmetric radius tokens (0px 8px 0 0, 0px 0 8px 8px) are used for tab shapes and card connectors.
Border Widths
Hairline
0.5px — sub-pixel dividers
Thin
1px — standard UI borders
Base
6.5px — left accent stripe for notification banners and inline messages
Shadows / Elevation
Shadow Tokens
6 tokens
shadow-sm
White mask
1133px white ring — an extreme mask technique used to clip/overlay elements
shadow-md
Standard drop
rgba(0,0,0,.3) 2px 6px — standard card shadow at 30% opacity
shadow-lg
Lighter drop
rgba(0,0,0,.2) 2px 6px — softer shadow at 20% for panels
shadow-xl
Gray glow
rgb(128,128,128) 0px 0px 10px — mid-gray radial glow on dark surfaces
shadow-5
Dark raised
rgb(42,42,42) 1px 5px 5px 3px — dark offset shadow for elevated elements
shadow-6
IBM blue glow
Blue inset (−80px top) + blue drop — IBM brand interactive glow
Z-Index
| Layer | Value | Usage |
|---|
| z-1 · Base | 1 | Default stacking context, base content |
| z-2 · Raised | 2 | Elevated elements, stacked cards |
| z-3 · Overlay A | 90 | Sticky sub-navigation, context menus |
| z-4 · Overlay B | 95 | Secondary overlays, floating bars |
| z-5 · Pre-Nav | 99 | Just below navigation |
| z-6 · Navigation | 100 | Primary navigation, persistent header |
| z-7 · Drawer | 900 | Side drawers, panels, flyouts |
| z-8 · Pre-Modal | 999 | Just below modal layer |
| z-9 · Modal | 1000 | Modal dialogs, confirmation boxes |
| z-10 · Critical | 6000 | Critical alerts, session warnings |
| z-11 · System | 9000 | System-level UI, service interrupts |
| z-12 · Priority | 99999 | High-priority third-party widgets |
| z-13 · Mega | 1,000,000 | Live chat, support overlays (1M threshold) |
| z-14 · Ultra | 9,999,999 | Near-absolute priority |
| z-15 · MAX | 2,147,483,647 | Browser int32 maximum — absolute top layer |
IBM's 15-layer z-index stack is the largest in this series. The escalation 100 → 6000 → 9000 → 99999 → 1,000,000 → 9,999,999 → 2,147,483,647 reflects IBM's multi-decade web platform history — each jump represents successive third-party integrations that kept "winning" z-index conflicts.
Breakpoints
📱
breakpoint-xs → bp-10
1–650px
Minimum (1px) through phone range — 10 breakpoints with fractional values (671.68px)
📱
bp-11 → bp-17
671–768px
Large phone to tablet — fractional 671.68px paired with 671 and 672 for sub-pixel precision
💻
bp-18 → bp-22
799–1024px
Tablet to standard desktop — paired 799/800 and 1023/1024 boundaries
💻
bp-23 → bp-26
1055–1100px
Wide tablet — fractional 1055.68px paired with 1056px; 1099/1100 boundary
🖥️
bp-27 → bp-30
1190–1312px
Desktop — 1190/1200 and 1311/1312 paired boundaries for medium and wide layouts
🖥️
bp-31 → bp-33
1583–1585px
Ultra-wide — three consecutive values (1583, 1584, 1585) — a triple-boundary pattern unique to IBM in this series
Opacity
Opacity Tokens
2 tokens only — IBM uses RGBA colors for most transparency
opacity-30
30% — disabled / ghosted
opacity-95
95% — near-opaque overlay
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-blue | --color-dark-gray | 3.6:1 | AA Large |
| --color-blue | --color-black | 4.18:1 | AA Large |
| --color-blue | --color-blue-2 | 1:1 | Fail |
| --color-blue | --color-white | 4.57:1 | AA |
| --color-blue | --color-white-2 | 5.03:1 | AA |
| --color-dark-gray-2 | --color-dark-gray | 2.32:1 | Fail |
| --color-dark-gray-2 | --color-black | 2.69:1 | Fail |
| --color-dark-gray-2 | --color-white | 7.1:1 | AAA |
| --color-dark-gray-2 | --color-white-2 | 7.81:1 | AAA |
| --color-dark-cyan | --color-white | 10.38:1 | AAA |
| --color-dark-cyan | --color-white-2 | 11.42:1 | AAA |
| --color-dark-cyan | --color-dark-gray | 1.59:1 | Fail |
| --color-dark-gray-5 | --color-white | 13.05:1 | AAA |
| --color-dark-gray-5 | --color-dark-gray | 1.26:1 | Fail |
| --color-dark-gray-6 | --color-white | 17.18:1 | AAA |
| --color-dark-gray-6 | --color-dark-gray | 1.04:1 | Fail |
| --color-dark-gray-6 | --color-blue-2 | 3.78:1 | AA Large |
CSS Variables Reference
Black--color-black#000000
Dark Gray (body)--color-dark-gray#161616
Dark Gray 3--color-dark-gray-3#171717
Dark Gray 4 (card)--color-dark-gray-4#393939
White (near-white)--color-white#F4F4F4
White 2 (pure)--color-white-2#FFFFFF
IBM Blue (primary)--color-blue-2#0F62FE
Light Cyan--color-light-cyan#9EF0F0
Mid Gray--color-mid-gray#8D8D8D
Blue (link)--color-blue#0062FE
Dark Gray 2--color-dark-gray-2#525252
Dark Cyan (text)--color-dark-cyan#004144
Light Gray (border)--color-light-gray#C6C6C6
Blue 3 (light)--color-blue-3#4589FF
Blue 4 (dark)--color-blue-4#0043CE
Dark Cyan 2--color-dark-cyan-2#009D9A
Red / Pink--color-red#EE5396
Light Blue 2--color-light-blue-2#78A9FF
Times (ghost base token)--font-family-baseTimes
IBM Plex Sans--font-family-2IBM Plex Sans
IBM Plex Mono--font-family-3IBM Plex Mono
Light--font-weight-light300
Regular--font-weight-regular400
SemiBold--font-weight-semibold600
2xs (12px)--font-size-2xs12px
sm (14px)--font-size-sm14px
base (16px)--font-size-base16px
lg (18px)--font-size-lg18px
2xl (20px)--font-size-2xl20px
4xl (32px)--font-size-4xl32px
5xl (42px)--font-size-5xl42px
48px--font-size-48px48px
56px (55.8px)--font-size-56px55.8048px
Tight (+0.16px)--letter-spacing-tight0.16px
Normal (+0.32px)--letter-spacing-normal0.32px
64 (52px)--space-6452.0078px
128 (90.6px)--space-12890.6328px
160 (169.95px)--space-160169.95px
192 (179.1px)--space-192179.055px
256 (266.5px)--space-256266.5px
23 (352.6px)--space-23352.555px
24 (430.5px ✱)--space-24430.5px
Hairline (0.5px)--border-width-hairline0.5px
Thin (1px)--border-width-thin1px
Base (6.5px accent)--border-width-base6.5px
Square (IBM default)default0px
SM (top-right tab)--radius-sm0px 8px 0 0
MD (bottom pair)--radius-md0px 0 8px 8px
Full (8px)--radius-full8px
R7 (top pair)--radius-r78px 8px 0 0
R10 (28px)--radius-r1028px
R11 (circle)--radius-r1150%
Instant (70ms — fastest)--duration-instant0.07s
Fast (110ms)--duration-fast0.11s
Normal (150ms)--duration-normal0.15s
Slow (240ms)--duration-slow0.24s
Slower (300ms)--duration-slower0.3s
Ease In (primary)--easing-ease-inease-in
Ease In-Out--easing-ease-in-outease-in-out
Linear--easing-linearlinear
Ghosted (30%)--opacity-3030%
Near-opaque (95%)--opacity-9595%
Base--z-11
Navigation--z-6100
Modal--z-91000
Critical--z-106000
Priority--z-1299999
Mega (1M)--z-131,000,000
Ultra (10M)--z-149,999,999
Maximum (int32)--z-152,147,483,647
DESIGN SYSTEM PREVIEW · IBM CARBON · GENERATED 15/04/2026 · 23 COLOR TOKENS · 13 FONT-SIZE · 3 FONT-FAMILY · 3 FONT-WEIGHT · 14 LINE-HEIGHT · 2 LETTER-SPACING · 23 SPACING · 11 RADIUS · 3 BORDER-WIDTH · 6 SHADOW · 5 DURATION · 3 EASING · 15 Z-INDEX · 33 BREAKPOINTS · 2 OPACITY