logo
Digital Design System

Overview

In this section, we are going to provide you an overview of all Milestone Systems web colors.

Table of contents

Overview

The following colors, defined below, could be used differently in different context. It does not mean we can use all the colors the way we would like though.

It is global list of colors made for web including our CMS and they are defined here for knowledge purposes.

Click on the provided links, if you would like to get more information about font colors or background colors.

Primary colors

Below are defined all global Primary colors.

Milestone clear blue$clear-blue
Milestone dark blue$dark-blue
Milestone yellow$yellow

Shades of Gray

Below are defined all Grays, White, Black colors.

gray 1$gray-1
gray 2$gray-2
gray 3$gray-3
gray 4$gray-4
gray 5$gray-5
gray 6$gray-6
gray 7$gray-7
gray 8$gray-8
gray 9$gray-9
gray 10$gray-10
white$white
black$black

Alternative colors

Below are defined all global Alternative colors.

Alt blue 1$alt-blue-1
alt blue 2$alt-blue-2
alt blue 3$alt-blue-3
alt yellow 1$alt-yellow-1
alt yellow 2$alt-yellow-2
confirm green$confirm-green
danger red 1$danger-red-1
danger red 2$danger-red-2
sand$sand

Transparent colors

Below are defined all Transparent colors.

white 50%$rgba-7
white 30%$rgba-8
white 10%$rgba-9
black 30%$rgba-10
black 10%$rgba-11
black 3%$rgba-16
gray 6 50%$rgba-12
gray 7 50%$rgba-4
gray 8 50%$rgba-13
dark blue 12%$rgba-2
dark blue 17%$rgba-1
dark blue 30%$rgba-6
danger red 50%$rgba-5
clear blue 50%$rgba-3

Gradients colors

Below are defined all global gradients.

clear blue gradient$clear-blue-gradient
clear blue gradient reverse$clear-blue-gradient-reverse
dark blue gradient$dark-blue-gradient
dark blue gradient reverse$dark-blue-gradient-reverse
dark blue gradient$dark-blue-gradient
mixed blue gradient$mixed-blue-gradient
mixed blue gradient reverse$mixed-blue-gradient-reverse
yellow gradient$yellow-gradient
gray gradient 1$gray-gradient-1
gray gradient 2$gray-gradient-2
gray gradient 3$gray-gradient-3
gray gradient 4$gray-gradient-4
gray gradient 5$gray-gradient-5

Shadows

Below are defined all global shadows.

shadow small$shadow-small
shadow medium$shadow-medium
shadow large$shadow-large