Design System inspired by IBM

Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.

Usage

npx getdesign@latest add ibm

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official IBM design system. A curated starting point for building IBM-like UIs with your AI coding agent.

Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.

Preview

ibm.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF IBM

Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.

Explore the system View tokens

Color Palette

Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.

Primary

IBM Blue

#0f62fe

Brand color

Blue 80

#002d9c

Brand color

Blue 20

#d0e2ff

Brand color

Gray 100

#161616

Brand color

Gray 80

#393939

Brand color

Gray 60

#6f6f6f

Brand color

Gray 10

#f4f4f4

Brand color

White

#ffffff

Brand color

Red

#da1e28

Brand color

Green

#24a148

Brand color

Typography

A type system inspired by IBM.

IBM Plex Sans

IBM Plex Sans, IBM Plex Sans

IBM Plex Mono

IBM Plex Mono, IBM Plex Sans

IBM Plex Serif

IBM Plex Serif, IBM Plex Sans

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by IBM.

Not detected on this URL

Components

Other component primitives mapped from the IBM spec.

Not detected on this URL

Design System Inspired by IBM

1. Visual Theme & Atmosphere

Enterprise tech. Corporate blue, Carbon Design System, structured grid precision.

Key Characteristics:

IBM Blue (#0F62FE) as primary brand color

Carbon Design System with 2x grid

IBM Plex type family (Sans, Mono, Serif)

Structured enterprise grid precision

Accessibility-first component design

2. Color Palette & Roles

Primary

IBM Blue (#0F62FE): Brand color
Blue 80 (#002D9C): Brand color
Blue 20 (#D0E2FF): Brand color
Gray 100 (#161616): Brand color
Gray 80 (#393939): Brand color
Gray 60 (#6F6F6F): Brand color
Gray 10 (#F4F4F4): Brand color
White (#FFFFFF): Brand color
Red (#DA1E28): Brand color
Green (#24A148): Brand color

3. Typography Rules

Font Family

Display & UI: IBM Plex Sans, IBM Plex Mono, IBM Plex Serif

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

IBM Blue: #0F62FE
Blue 80: #002D9C
Blue 20: #D0E2FF
Gray 100: #161616
Gray 80: #393939
Gray 60: #6F6F6F

Typography

Font: IBM Plex Sans, IBM Plex Mono, IBM Plex Serif