IBM Plex Sans

Ag

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Display 1

Font size: 48px / 3rem | Line height: 60px / 3.75rem | Tracking: -2%

Display lg
Semibold

Display 2

Font size: 36px / 2.25rem | Line height: 44px / 2.75rem | Tracking: -2%

Display md

Semibold

Display 3

Font size: 30px / 1.875rem | Line height: 38px / 2.375rem

Display sm

Semibold

Heading 1

Font size: 24px / 1.5rem | Line height: 32px / 2rem

Display xs

Regular

Display xs
Semibold

Display xs

Semibold

Display xs

Semibold

Text xl

Font size: 20px / 1.25rem | Line height: 30px / 1.875rem

Text xl
Regular
Text xl
Medium
Text xl
Semibold

Text lg

Font size: 18px / 1.125rem | Line height: 28px / 1.75rem

Text lg

Regular

Text lg

Medium

Text lg

Semibold

Text md

Font size: 16px / 1rem | Line height: 24px / 1.5rem

Text md

Regular

Text md

Medium

Text md

Semibold

Text small

Font size: 14px / 0.875rem | Line height: 20px / 1.25rem

Text sm

Regular

Text sm

Medium

Text sm

Semibold

Text xs

Font size: 12px / 0.75rem | Line height: 18px / 1.125rem

Text xs

Regular

Text xs

Medium

Text xs

Semibold

Base

These are base black and white color styles to quickly swap out if you need to.

AAA 21.1

White

#FFFFFF

AAA 21:1

Black

#000000

Gray

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

AA 4.84

25

#FCFCFD

AA 4.73

50

#F9FAFB

AA 4.49

100

#F2F4F7

4.19

200

#EAECF0

1.48

300

#D0D5DD

2.58

400

#98A2B3

AA 4.95

500

#667085

AAA 7.65

600

#475467

AAA 10.41

700

#344054

AAA 14.74

800

#1D2939

AAA 17.79

900

#101828

Primary

The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

AA 6.39

25

#F5F9FF

AA 6.16

50

#F0F6FF

AA 5.74

100

#E6EFFF

AA 4.93

200

#B0CDFF

1.70

300

#79ABFF

2.49

400

#4388FF

3.33

500

#0C66FF

AA 4.96

600

#004CCC

AA 6.63

700

#003999

AAA 8.67

800

#53389E

AAA 10.78

900

#42307D

Primary (Bidda)

The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

AA 6.39

25

#F3F6FC

AA 6.16

50

#EBEFF9

AA 5.74

100

#DBE4F6

AA 4.93

200

#899AB8

1.70

300

#536D97

2.49

400

#325185

3.33

500

#002566

AA 4.96

600

#00235C

AA 6.63

700

#001A47

AAA 8.67

800

#001638

AAA 10.78

900

#000F29

Secondary

Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels.

AA 5.97

25

#FFFAF5

AA 5.86

50

#FFF7F0

AA 5.66

100

#FFF2E6

AA 4.6

200

#FFD7B0

1.66

300

#FFBB79

2.03

400

#FFA043

3.33

500

#FF840C

AA 3.87

600

#CC6500

AA 6.21

700

#994C00

AAA 10.35

800

#663200

AAA 15.13

900

#3D1E00

Error

Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.

AA 6.4

25

#FFFBFA

AA 6.06

50

#FEF3F2

AA 5.4

100

#FEE4E2

AA 4.56

200

#FECDCA

1.95

300

#FDA29B

2.78

400

#F97066

3.76

500

#F04438

AA 4.82

600

#D92D20

AA 6.60

700

#B42318

AAA 8.70

800

#912018

AAA 9.86

900

#7A271A

Warning

Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.

AA 5.28

25

#FFFCF5

AA 5.17

50

#FFFAEB

AA 4.75

100

#FEF0C7

4.15

200

#FEDF89

1.54

300

#FEC84B

1.84

400

#FDB022

2.34

500

#F79009

3.49

600

#DC6803

AA 5.40

700

#B54708

AAA 7.49

800

#93370D

AAA 9.48

900

#7A2E0E

Success

Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.

AA 5.31

25

#F6FEF9

AA 5.17

50

#ECFDF3

AA 4.79

100

#D1FADF

4.24

200

#A6F4C5

1.52

300

#6CE9A6

1.91

400

#32D583

2.63

500

#12B76A

3.74

600

#039855

AA 5.44

700

#027A48

AAA 7.67

800

#05603A

AAA 9.68

900

#054F31