Copied!

DesignOps platform

The goal of DesignOps is to establish processes and measures that support scalable solutions for these challenges, so that designers can focus on designing and researching.

Your brand

Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu, egestas sed tellus in. Turpis neque neque vitae feugiat semper donec commodo. Vel a pharetra vitae tortor. Proin egestas lobortis velit, iaculis a.

Light themeDark theme

General

Applicable to backgrounds, icons, components

Black 100
Background, Surface, Canvas
Black 200
Background alt
Black 800
Icon
Black 500
Icon hover
Blue 500
Primary, Highlight, Link
Blue 400
Secondary, Hover

Type

The only colors used for our typography

Black 800
H1, H2 etc
Black 600
Body, Paragraph
Black 500
Hint
Black 400
Disabled
Black 100
Inverse
Blue 500
Hyperlink

Status

Use the following colors to denote the status of an object, task, or flow. Can be container, outline, icon or text

Green 500
Success, Positive
Yellow 500
Alert, Warning
Red 500
Error, Destructive
Black 300
Icon hover
Light themeDark theme

General

Applicable to backgrounds, icons, components

Black 800
Background, Surface, Canvas
Black 700
Background alt
Black 100
Icon
Black 500
Icon hover
Blue 500
Primary, Highlight, Link
Blue 400
Secondary, Hover

Type

The only colors used for our typography

Black 100
H1, H2 etc
Black 300
Body, Paragraph
Black 500
Hint
Black 600
Disabled
Black 100
Inverse
Blue 500
Hyperlink

Status

Use the following colors to denote the status of an object, task, or flow. Can be container, outline, icon or text

Green 500
Success, Positive
Yellow 500
Alert, Warning
Red 500
Error, Destructive
Ink 300
Disabled

UI color palette

Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus quis augue pharetra, ultrices tellus. Sed at tristique venenatis eu justo.
FFFFFF
100
F6F6F6
200
‍
E2E2E2
300
ABABAB
400
7A7A7A
500
404040
600
353535
700
212121
800
Blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus quis augue pharetra, ultrices tellus. Sed at tristique venenatis eu justo.
CEE4F9
100
9DC8F3
200
‍
6CADED
300
3A91E8
400
1976D2
500
114F8C
600
0C3B69
700
061D34
800
Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus quis augue pharetra, ultrices tellus. Sed at tristique venenatis eu justo.
E3F7E7
100
BDECC4
200
‍
8FDF9E
300
57D374
400
00C853
500
00AD24
600
008A00
700
006A00
800
Yellow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus quis augue pharetra, ultrices tellus. Sed at tristique venenatis eu justo.
FFF9E1
100
FFEFB2
200
‍
FFE480
300
FFDB49
400
FFC800
500
FFBA00
600
FF9500
700
FF7400
800
Red
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus quis augue pharetra, ultrices tellus. Sed at tristique venenatis eu justo.
FFE8EE
100
FFC6D1
200
‍
FA8C95
300
F35A6B
400
FF1744
500
F60027
600
E40022
700
C8000C
800
View Figma resource