Design System

Enterprise
design,
at scale.

A disciplined, accessible design system built on the Carbon Design System. IBM Plex typography, a systematic gray scale, and IBM Blue as the primary interactive color.

21 color tokens 18 type steps 2px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Clean whites with a disciplined gray scale and IBM Blue as the primary interactive color. 21 tokens across surfaces, text hierarchy, interaction, and semantic states.

White
#ffffff
Primary background
IBM Blue
#0F62FE
Primary interactive
Blue Hover
#0353e9
Hover state
Blue Active
#002d9c
Active state
Blue 20
#d0e2ff
Highlights, tags
Blue 10
#edf5ff
Subtle highlights
Gray 100
#161616
Primary text
Gray 90
#262626
Secondary text
Gray 80
#393939
Tertiary text
Gray 70
#525252
Placeholder text
Gray 60
#6f6f6f
Helper text
Gray 50
#8d8d8d
Disabled text
Gray 40
#a8a8a8
Disabled on dark
Gray 30
#c6c6c6
Borders, dividers
Gray 20
#e0e0e0
Subtle borders
Gray 10
#f4f4f4
Secondary bg
Green
#24a148
Success
Yellow
#f1c21b
Warning
Red
#da1e28
Error, destructive
Purple
#8a3ffc
Decorative accent
Teal
#009d9a
Secondary accent
Typography

Type Scale

IBM Plex Sans as primary typeface with IBM Plex Mono for code. Disciplined weight range (300–700) with precise letter-spacing for enterprise readability.

Display 03 Enterprise 68px / 1.0 / −0.02em
Display 02 Build at scale 54px / 1.14 / 0.01em
Prod H05 Section heading 36px / 1.20 / 0.01em
Prod H04 Watson AI Platform 28px / 1.29 / 0.01em
Heading 02 Subsection heading 16px / 1.29 / 0.01em
Body 02 Default body text for readable content 16px / 1.50 / 0.01em
Body 01 Dense data, comparison rows 14px / 1.43 / 0.01em
Code 01 const ibm = new DesignSystem(); 14px / 1.43 / Mono
Caption 01 Meta info · Footer · Labels 12px / 1.33 / 0.02em

Fonts

Primary IBM Plex Sans 300, 400, 600, 700 · 12–68px
Mono IBM Plex Mono 400 · 12–16px · Code only
Fallback system-ui, -apple-system, sans-serif Substitute for all above
Layout

Spacing & Shapes

Base unit 2px. Compact density with disciplined spacing. 13-step spacing scale plus 6 layout tokens, 6 border radius values.

Spacing Scale (2px base)

012px
024px
038px
0412px
0516px
0624px
0732px
0948px
1180px
13128px

Border Radius

default 0px
sm 2px
md 4px
lg 8px
xl 12px
pill 100px
Elevation

Depth & Surfaces

Flat and functional. Minimal shadows, clean borders. 4 distinct surface levels using the gray and blue scales.

Depth Levels

White
Base page background — the canvas
Level 0
Gray 10
Sections, alternating rows, card backgrounds
Level 1
Blue 10
Interactive highlights, selected states
Level 2
Blue 20
Active selections, emphasis highlights
Level 3

Surface System

White #ffffff
Gray 10 #f4f4f4
Blue 10 #edf5ff
Blue 20 #d0e2ff
Components

Button Variants

Primary (IBM Blue), secondary (outlined), ghost, and danger variants. Sharp corners, 48px height, consistent IBM Plex Sans typography.

Primary Button
Main call to action — highest visual weight
.btn-primary
IBM Blue (#0F62FE) background, White text, 0px radius. Use for the single most important action. Hover: #0353e9.
Secondary Button
Secondary actions, alternative options
.btn-secondary
IBM Blue text, 1px IBM Blue border, transparent background. Hover: Blue 10 (#edf5ff) fill.
Ghost Button
Tertiary actions, less prominent interactions
.btn-ghost
IBM Blue text, no border, transparent background. Hover: Gray 10 (#f4f4f4) fill.
Danger Button
Destructive actions, irreversible operations
.btn-danger
Red (#da1e28) background, White text. Use sparingly for destructive actions only.
Text Input
User text input fields
input
White background, 1px Gray 30 border, 0px radius, 48px height. Focus: 2px IBM Blue border.
Tag
Labels, categories, status indicators
.tag
Info Success Warning Error
Inline-flex, 0px radius, semantic color coding. Use for status, categories, and labels.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary page background
  • IBM Blue (#0F62FE) for all interactive elements
  • Gray scale systematically for text hierarchy
  • Sharp 0px radius on components (Carbon standard)
  • IBM Plex Sans for all text, IBM Plex Mono for code
  • WCAG 2.1 AA contrast ratios (4.5:1 minimum)
  • 2px-based spacing with 8/16/24/32px increments
  • Green for success, Red for errors only
Don't — Avoid
  • IBM Blue for large surfaces or backgrounds
  • Rounded corners on primary components
  • Red/Yellow/Green for non-semantic purposes
  • Decorative gradients or glow effects
  • Mixing IBM Plex with other display fonts
  • Dense, cramped layouts without breathing room
  • Heavy drop shadows or elevation effects
  • Gray 70 or lighter for primary body text