Design System

Typography

h1

H1 Heading - IBM Plex Serif Bold

h2

H2 Heading - IBM Plex Serif Semibold

h3

H3 Heading - IBM Plex Serif Semibold

h4

H4 Heading - IBM Plex Serif Semibold

h5
H5 Heading - IBM Plex Serif Semibold
h6
H6 Heading - IBM Plex Serif Semibold
p

Body Text - IBM Plex Sans Regular

p

Monospace Text - IBM Plex Mono Regular

figcaption
Figure Caption - IBM Plex Sans
aLink Text
p

Small Text - IBM Plex Sans

Color Palette

Zinc

50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Indigo

50
100
200
300
400
500
600
700
800
900
950

Purple

50
100
200
300
400
500
600
700
800
900
950

Orange

50
100
200
300
400
500
600
700
800
900
950

Red

50
100
200
300
400
500
600
700
800
900
950

Green

50
100
200
300
400
500
600
700
800
900
950

Gradients

primary
secondary
accent

Icons

ArrowRightIcon
ArrowLeftIcon
XMarkIcon
Bars2Icon
BuildingOffice2Icon
HomeModernIcon
ArrowTurnDownRightIcon

Tags

DesignFront-EndLeadershipStrategyProduct ManagementDesign System

Spacing Scale

px (1px)
0 (0px)
0.5 (2px)
1 (4px)
1.5 (6px)
2 (8px)
2.5 (10px)
3 (12px)
3.5 (14px)
4 (16px)
5 (20px)
6 (24px)
7 (28px)
8 (32px)
9 (36px)
10 (40px)
11 (44px)
12 (48px)
14 (56px)
16 (64px)
20 (80px)
24 (96px)
28 (112px)
32 (128px)
36 (144px)
40 (160px)
44 (176px)
48 (192px)
52 (208px)
56 (224px)
60 (240px)
64 (256px)
72 (288px)
80 (320px)
96 (384px)

Grid System

grid-cols-1
Column 1
grid-cols-2
Column 1
Column 2
grid-cols-3
Column 1
Column 2
Column 3
grid-cols-4
Column 1
Column 2
Column 3
Column 4

Buttons

Primary
Secondary
Outline

Animations

Scale
Rotate
Translate