Dark Mode

# 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 (Dark Theme)
Blue 40
#78a9ff
Interactive (dark)
Blue 60
#0f62fe
Primary button
Gray 100
#161616
Background
Blue Scale
Blue 90
#001d6c
Tint surface (dark)
Blue 60
#0f62fe
Primary action
Blue 40
#78a9ff
Links (dark)
Blue 50
#4589ff
Hover (dark)
Neutral Scale (Dark Theme)
Gray 100
#161616
Background
Gray 90
#262626
Layer 01
Gray 80
#393939
Layer 02 / Border
Gray 70
#525252
Subtle border
Gray 60
#6f6f6f
Placeholder
Gray 50
#8d8d8d
Disabled
Gray 30
#c6c6c6
Secondary text
Gray 10
#f4f4f4
Primary text
Support & Status (Dark)
Red 40
#ff8389
Error (dark)
Green 40
#42be65
Success (dark)
Yellow 30
#f1c21b
Warning
Blue 50
#4589ff
Info (dark)

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
Tertiary button
Tertiary (Blue 40)
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

Project name
Default state (bottom-border)
API endpoint
Focus state (Blue 40 bottom-border)
Region
Error: Region not found
Description

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
Gray 100 background
Layer 01
Gray 90 (#262626)
Layer 02
Gray 80 (#393939)
Raised
Dropdowns, tooltips
Focus
2px Blue 40 ring
Bottom-border
Active input / tab