Design System Inspired by IBM

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value from the Carbon Design System — visualized.

Explore tokens View documentation
01 / Colors

Color Palette

Primary
Blue 60
#0f62fe
Primary interactive
White
#ffffff
Page background
Gray 100
#161616
Primary text, nav
Blue Scale
Blue 10
#edf5ff
Tint surface
Blue 60
#0f62fe
Primary action
Blue 70
#0043ce
Link hover
Blue 80
#002d9c
Active/pressed
Neutral Scale
Gray 10
#f4f4f4
Layer 01 surface
Gray 20
#e0e0e0
Subtle borders
Gray 30
#c6c6c6
Borders, dividers
Gray 50
#8d8d8d
Disabled icons
Gray 60
#6f6f6f
Placeholder text
Gray 70
#525252
Secondary text
Gray 80
#393939
Secondary button
Gray 90
#262626
Dark surfaces
Gray 100
#161616
Primary text
Support & Status
Red 60
#da1e28
Error / Danger
Green 50
#24a148
Success
Yellow 30
#f1c21b
Warning
Blue 60
#0f62fe
Informational
02 / Typography

Typography Scale

Display 01
Display 01 — 60px / 300 / 1.17 / IBM Plex Sans
Display 02
Display 02 — 48px / 300 / 1.17 / IBM Plex Sans
Heading 01
Heading 01 — 42px / 300 / 1.19 / IBM Plex Sans
Heading 02
Heading 02 — 32px / 400 / 1.25 / IBM Plex Sans
Heading 03
Heading 03 — 24px / 400 / 1.33 / IBM Plex Sans
Heading 04 — Semibold
Heading 04 — 20px / 600 / 1.40 / IBM Plex Sans
Body Long 01 — Build smarter business workflows with AI and hybrid cloud solutions that scale.
Body Long 01 — 16px / 400 / 1.50 / IBM Plex Sans
Body Short 01 — Compact text for UI elements and captions with micro-tracking.
Body Short 01 — 14px / 400 / 1.29 / 0.16px / IBM Plex Sans
Caption 01 — Metadata, timestamps, helper text
Caption 01 — 12px / 400 / 1.33 / 0.32px / IBM Plex Sans
const config = { theme: 'g100', prefix: 'cds' };
Code 01 — 14px / 400 / 1.43 / 0.16px / IBM Plex Mono
Mono Display
Mono Display — 42px / 400 / 1.19 / IBM Plex Mono
03 / Buttons

Button Variants

Primary button
Primary (Blue 60)
Secondary button
Secondary (Gray 80)
Tertiary button
Tertiary (Ghost Blue)
Ghost button
Ghost
Delete resource
Danger (Red 60)
AI Ready
Tag / Label
04 / Cards

Card & Tile Examples

Hybrid Cloud

IBM Cloud Pak

Modernize and build cloud-native applications anywhere with an open, faster, and more secure foundation.

AI Platform

watsonx

Scale and accelerate the impact of AI across your business with a next-generation enterprise studio.

Automation

Business Automation

Automate business and IT operations with AI-powered decision-making and intelligent workflows.

05 / Forms

Form Elements

Default state (bottom-border)
Focus state (Blue 60 bottom-border)
Error: Region not found
06 / Spacing

Spacing Scale

2
4
8
12
16
24
32
40
48

Layout spacing: 16, 24, 32, 48, 64, 80, 96, 160px. Base unit: 8px (Carbon 2x grid).

07 / Radius

Border Radius Scale

0px
Buttons, inputs, cards
2px
Small elements
24px
Tags / Labels
50%
Avatars, icons
08 / Elevation

Elevation & Depth

Level 0: Flat
White surface, no shadow
Layer 01
Gray 10 (#f4f4f4)
Layer 02
Gray 20 (#e0e0e0)
Raised
Dropdowns, tooltips
Focus
2px inset Blue 60
Bottom-border
Active input / tab