Color

Colors enable us to maintain cognitive scanning on a user interface, establishing a cohesive experience.

Color scale

FDS default themes are derived from the Paraşüt UI Library color palette and extended to support group products. FDS classifies colors into 3 main groups:

Primary product color

Neutral colors

Semantic colors

Primary product color

The primary color is the main color of the product color theme and color palette. It represents the product's branding and experience overall. It is used to denote active or default colors shown on the UI.

Blue

The core Blue serves as the primary action color for some of our products and experiences.

color / blue

blue-0

#fafafa

blue-5

#f0f4fa

blue-10

#ddecff

blue-20

#c8e3ff

blue-30

#9cc7ff

blue-40

#73adff

blue-50

#4a92ff

blue-60

#0f62fe

blue-70

#003bcb

blue-80

#002599

blue-90

#001466

blue-100

#010933

Neutral colors

The Neutral palettes are dominant in the themes and have alternatives to ensure harmony with the product's primary color.

Gray

color / gray

gray-0

#fafafa

gray-5

#f2f2f2

gray-10

#e4e4e4

gray-20

#d5d5d5

gray-30

#b8b8b8

gray-40

#9e9e9e

gray-50

#848484

gray-60

#5b5b5b

gray-70

#3e3e3e

gray-80

#2b2b2b

gray-90

#1f1f1f

gray-100

#191919

Antrasit gray

color / antrasit-gray

antrasit-gray-0

#fafafa

antrasit-gray-5

#fafdff

antrasit-gray-10

#ebeff2

antrasit-gray-20

#dce1e5

antrasit-gray-30

#bdc3c9

antrasit-gray-40

#a1a8af

antrasit-gray-50

#878d96

antrasit-gray-60

#5a6168

antrasit-gray-70

#3c4247

antrasit-gray-80

#282d31

antrasit-gray-90

#1b1f22

antrasit-gray-100

#141819

Cool gray

color / cool-gray

cool-gray-0

#fafafa

cool-gray-5

#f7f9fa

cool-gray-10

#e5e9ec

cool-gray-20

#d4d9df

cool-gray-30

#b2bcc9

cool-gray-40

#94a2b4

cool-gray-50

#79889f

cool-gray-60

#505f79

cool-gray-70

#344461

cool-gray-80

#202e49

cool-gray-90

#121d31

cool-gray-100

#080e19

Semantic colors

Semantic color helps users identify status, see actions, locate help, and understand the next steps.

Green

The green color emphasis the positive (e.g. success, confirmation) message on products.

color / green

green-0

#fafafa

green-5

#f0faf1

green-10

#d1f2d3

green-20

#b4e9b7

green-30

#81d287

green-40

#58be60

green-50

#36a93f

green-60

#15781d

green-70

#07530d

green-80

#023906

green-90

#002604

green-100

#011903

Bronze

The bronze is used for conveying the alert messages.

color / bronze

bronze-0

#fafafa

bronze-5

#faf5f0

bronze-10

#f4e3cf

bronze-20

#eed2af

bronze-30

#e2b57e

bronze-40

#d59b54

bronze-50

#c8832e

bronze-60

#ad5f00

bronze-70

#8f4e00

bronze-80

#703c00

bronze-90

#522c00

bronze-100

#331c01

Red

The red is used for danger or destructive meanings.

color / red

red-0

#fafafa

red-5

#faf0f1

red-10

#fcdbde

red-20

#fdc6ca

red-30

#f89ba2

red-40

#f3767e

red-50

#ee515b

red-60

#da1e28

red-70

#b00911

red-80

#860207

red-90

#5d0004

red-100

#330103

Purple

color / purple

purple-0

#fafafa

purple-5

#f4f0fa

purple-10

#ecddfe

purple-20

#e2caff

purple-30

#caa1ff

purple-40

#b47bfe

purple-50

#9e57fb

purple-60

#7b21ea

purple-70

#610bbc

purple-80

#4b028f

purple-90

#350061

purple-100

#1d0133

Color roles

In our color system, specific color palettes are used to distinguish certain elements based on their colors. This allows us to convey the message or emphasis to the user in the best possible way.

Color tokens

Our base color tokens have a semantic tokens, with each one serving a specific purpose in categories like background, foreground (text+icon) and borders.

color / background

#f2f2f2

background-main

Collection

2.Alias tokens

#fafafa

background-surface

Collection

2.Alias tokens

#e4e4e4

background-disabled

Collection

2.Alias tokens

#f0f4fa

background-notification

Collection

2.Alias tokens

#f0faf1

background-success

Collection

2.Alias tokens

#faf5f0

background-warning

Collection

2.Alias tokens

#faf0f1

background-destructive

Collection

2.Alias tokens

#121d31

background-main-inverse

Collection

2.Alias tokens

color / foreground

#1f1f1f

text-primary

Collection

2.Alias tokens

#5b5b5b

text-secondary

Collection

2.Alias tokens

#848484

text-tertiary

Collection

2.Alias tokens

#0f62fe

text-accent

Collection

2.Alias tokens

#0f62fe

text-link

Collection

2.Alias tokens

#fafafa

text-inverse

Collection

2.Alias tokens

#b8b8b8

text-disabled

Collection

2.Alias tokens

#0f62fe

text-information

Collection

2.Alias tokens

#7b21ea

text-new

Collection

2.Alias tokens

#15781d

text-success

Collection

2.Alias tokens

#ad5f00

text-warning

Collection

2.Alias tokens

#da1e28

text-destructive

Collection

2.Alias tokens

color / border

#e4e4e4

border-primary

Collection

2.Alias tokens

#1f1f1f

border-hover

Collection

2.Alias tokens

#0f62fe

border-focus

Collection

2.Alias tokens

#0f62fe

border-active

Collection

2.Alias tokens

#b8b8b8

border-disabled

Collection

2.Alias tokens

#15781d

border-success

Collection

2.Alias tokens

#0f62fe

border-notification

Collection

2.Alias tokens

#7b21ea

border-new

Collection

2.Alias tokens

#ad5f00

border-warning

Collection

2.Alias tokens

#da1e28

border-destructive

Collection

2.Alias tokens

Frame Design System

Frame Design System from Mikrogrup

Color

Color scale

Primary product color

Blue

Neutral colors

Gray

Antrasit gray

Cool gray

Semantic colors

Green

Bronze

Red

Purple

Color roles

Color tokens

Frame Design System

Resources

Support