logo
Digital Design System

Font Colors

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

Table of contents

Overview

The following colors are used for font colors on our website and only them.

Many are made for light background colors and others for dark background colors. However, there is no specific definition concerning how they should be used.

In the following section, we are displaying and providing the fonts CSS classes in order you to be able to use and apply the front colors when you need it in your layouts.

List of all our Font Colors

Milestone Clear Blue Font Color

To use the “Milestone Clear Blue“ font color you need to use the “msds-text-clear-blue“ CSS class on an element. Once applied, the content will look like the following:

msds-text-clear-blue

Milestone Dark Blue Font Color

To use the “Milestone Dark Blue“ font color you need to use the “msds-text-dark-blue“ CSS class on an element. Once applied, the content will look like the following:

msds-text-dark-blue

Milestone Yellow Font Color

To use the “Milestone Yellow“ font color you need to use the “msds-text-yellow“ CSS class on an element. Once applied, the content will look like the following:

msds-text-yellow

Gray 1 Font Color

To use the “Gray 1“ font color you need to use the “msds-text-gray-1“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-1

Gray 2 Font Color

To use the “Gray 2“ font color you need to use the “msds-text-gray-2“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-2

Gray 3 Font Color

To use the “Gray 3“ font color you need to use the “msds-text-gray-3“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-3

Gray 4 Font Color

To use the “Gray 4“ font color you need to use the “msds-text-gray-4“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-4

Gray 5 Font Color

To use the “Gray 5“ font color you need to use the “msds-text-gray-5“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-5

Gray 6 Font Color

To use the “Gray 6“ font color you need to use the “msds-text-gray-6“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-6

Gray 7 Font Color

To use the “Gray 7“ font color you need to use the “msds-text-gray-7“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-7

Gray 8 Font Color

To use the “Gray 8“ font color you need to use the “msds-text-gray-8“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-8

Gray 9 Font Color

To use the “Gray 9“ font color you need to use the “msds-text-gray-9“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-9

Gray 10 Font Color

To use the “Gray 10“ font color you need to use the “msds-text-gray-10“ CSS class on an element. Once applied, the content will look like the following:

msds-text-gray-10

White Font Color

To use the “White“ font color you need to use the “msds-text-white“ CSS class on an element. Once applied, the content will look like the following:

msds-text-white

Black Font Color

To use the “Black“ font color you need to use the “msds-text-black“ CSS class on an element. Once applied, the content will look like the following:

msds-text-black

Alt Blue 1 Font Color

To use the “Alt Blue 1“ font color you need to use the “msds-text-alt-blue-1“ CSS class on an element. Once applied, the content will look like the following:

msds-text-alt-blue-1

Alt Blue 2 Font Color

To use the “Alt Blue 2“ font color you need to use the “msds-text-alt-blue-2“ CSS class on an element. Once applied, the content will look like the following:

msds-text-alt-blue-2

Alt Blue 3 Font Color

To use the “Alt Blue 3“ font color you need to use the “msds-text-alt-blue-3“ CSS class on an element. Once applied, the content will look like the following:

msds-text-alt-blue-3

Alt Yellow 1 Font Color

To use the “Alt Yellow 1“ font color you need to use the “msds-text-alt-yellow-1“ CSS class on an element. Once applied, the content will look like the following:

msds-text-alt-yellow-1

Alt Yellow 2 Font Color

To use the “Alt Yellow 2“ font color you need to use the “msds-text-alt-yellow-2“ CSS class on an element. Once applied, the content will look like the following:

msds-text-alt-yellow-2

Confirm Green Font Color

To use the “Confirm Green“ font color you need to use the “msds-text-confirm-green“ CSS class on an element. Once applied, the content will look like the following:

msds-text-confirm-green

Danger Red 1 Font Color

To use the “Danger Red 1“ font color you need to use the “msds-text-danger-red-1“ CSS class on an element. Once applied, the content will look like the following:

msds-text-danger-red-1

Danger Red 2 Font Color

To use the “Danger Red 2“ font color you need to use the “msds-text-danger-red-2“ CSS class on an element. Once applied, the content will look like the following:

msds-text-danger-red-2

Sand Font Color

To use the “Sand“ font color you need to use the “msds-text-sand“ CSS class on an element. Once applied, the content will look like the following:

msds-text-sand