Milestone
30%

Release
60%

Colors

Style

Base Color Palette

The dashboard will synergize with the colour selection made by the
user and appropriately amend. Similarly, all other elements will
sync according to the base colours.

#e4eaec

#526069

#62a8ea

#57c7d4

#3aa99e

#f2a654

#f96868

#926dde

Color Palette

This color palette comprises primary and accent colors that can be
used for illustration or to develop your brand colors.
They've been designed to work harmoniously with each other.

The color palette starts with primary colors and fills in the spectrum
to create a complete and usable palette for web
project. We suggests using the 500 colors as the primary colors
in your project and the other colors as accents colors.

red

800 /
#d6494b

700 /
#e9595b

600 /
#f96868

500 /
#fa7a7a

400 /
#fa9898

300 /
#fab4b4

200 /
#fad3d3

100 /
#ffeaea

pink

800 /
#e53b75

700 /
#f44c87

600 /
#f96197

500 /
#f978a6

400 /
#fb8db4

300 /
#fba9c6

200 /
#ffccde

100 /
#fce4ec

purple

800 /
#6d45bc

700 /
#7c51d1

600 /
#926dde

500 /
#a58add

400 /
#bba7e4

300 /
#d2c5ec

200 /
#e3dbf4

100 /
#f6f2ff

indigo

800 /
#465bd4

700 /
#5166d6

600 /
#677ae4

500 /
#8897ec

400 /
#9daaf3

300 /
#bcc5f4

200 /
#dadef5

100 /
#edeff9

blue

800 /
#3583ca

700 /
#4e97d9

600 /
#62a8ea

500 /
#89bceb

400 /
#a2caee

300 /
#bcd8f1

200 /
#d5e4f1

100 /
#e8f1f8

cyan

800 /
#37a9b7

700 /
#47b8c6

600 /
#57c7d4

500 /
#77d6e1

400 /
#9ae1e9

300 /
#baeaef

200 /
#d3eff2

100 /
#ecf9fa

teal

800 /
#178d81

700 /
#269b8f

600 /
#3aa99e

500 /
#56bfb5

400 /
#79d1c9

300 /
#99e1da

200 /
#cdf4f1

100 /
#ecfdfc

green

800 /
#279566

700 /
#36ab7a

600 /
#46be8a

500 /
#5cd29d

400 /
#7dd3ae

300 /
#9fe5c5

200 /
#bfedd8

100 /
#e7faf2

light-green

800 /
#70a532

700 /
#83b944

600 /
#9ece67

500 /
#acd57c

400 /
#bad896

300 /
#cadfb1

200 /
#e0ecd1

100 /
#f1f7ea

yellow

800 /
#fbc02d

700 /
#f9cd48

600 /
#f7da64

500 /
#f7e083

400 /
#f8e59b

300 /
#f6e7a9

200 /
#f9eec1

100 /
#fffae7

orange

800 /
#e98f2e

700 /
#ec9940

600 /
#f2a654

500 /
#f4b066

400 /
#f6be80

300 /
#fbce9d

200 /
#ffddb9

100 /
#fff3e6

brown

800 /
#715146

700 /
#7d5b4f

600 /
#8d6658

500 /
#a17768

400 /
#b98e7e

300 /
#d3aa9c

200 /
#e2bdaf

100 /
#fae6df

grey

800 /
#424242

700 /
#616161

600 /
#757575

500 /
#9e9e9e

400 /
#bdbdbd

300 /
#e0e0e0

200 /
#eeeeee

100 /
#fafafa

blue-grey

800 /
#263238

700 /
#37474f

600 /
#526069

500 /
#76838f

400 /
#a3afb7

300 /
#ccd5db

200 /
#e4eaec

100 /
#f3f7f9

Color Application

Choose Your Palette

Limit your selection of colors by choosing three color hues from
the primary palette and one accent color from the secondary
palette. The accent may or may not need fallback options.

Active color

#4e97d9

700

Base color

#62a8ea

600

Hover color

#89bceb

500

Background opt.

#e8f1f8

100

Active color

#e9595b

700

Base color

#f96868

600

Hover color

#fa7a7a

500

Background opt.

#ffeaea

100

Text Color

To convey a hierarchy of information, you can use different shades
for text. The standard content text color is #79838B.

Title color

#37474f

Subtitle color

#526069

Text color

#76838f

Prompt color

#a3afb7

Use Alpha For Icons, And Dividers

Icons and dividers, also benefit from having an alpha value of
black instead of a solid color, to make sure the color below.

Grey Darkest

Normal:40%

Hover:60%

Active:100%

Normal:60%

Hover:80%

Active:100%

Gray Base

Dividers 10%

Border Color

Border color should use the primary #E6E8EA color, which should
be the main color of your project.