Logo

We adhere to strict standards to ensure our logo is used consistently, appropriately and respectfully.

Overview

This section shows how to style the logo on digital properties such as websites and applications. For information on how to use the logo in print, see the Brand Standards section of the Design Guide.

Go to Brand Standards

Logo types

Primary

This is the primary logo. It is horizontal and uses BlueDark (#003A70).

Download primary logo files (ZIP)

Blue (#003A70) is our primary color to be used digitally.

Reversed

Use the white reversed logo on dark backgrounds.

Please note: there is a difference between the “Primary” and “Reversed” logos. Each is unique and reversing one for the other will cause the face and outer line to be presented incorrectly.

Download reversed logo files (ZIP)

Helpful hint

Never reverse the color of the Primary logo. Instead, use the white reversed corporate logo for dark backgrounds.

The white (#FFFFFF) reversed logo is used on dark backgrounds. Notice how the circle background and outline of this mark is different than the primary logo.

Black and white

The black logo should only be used on print style sheets or whenever color is not available.

Download black and white logo files (ZIP)

Black (#000000) is used when color is unavailable

Guidelines

Keep the face of the lion symbol lighter than the background.

Do not allow the face of the lion symbol to be darker than the background.

Keep the face of the lion symbol white when the background is red, pink or orange.

Never allow the face of the lion symbol to be red, pink or orange.

Use the correct Reversed logo.

Never reverse the blue Primary version of the logo. The face of the lion symbol should always be lighter than the background.

Icons

Icons are small line graphics that are meaningful to a small section of text or are actionable for the user.

Overview

The Digital Design System’s icon library currently exists within the previous design guide system. Go to the Icon Library (3.1)

Refer to the icon guidelines in the Photography & Illustration section of this site for the correct use of icons.

Go to Icon Guidelines

The svg icon library remains in the previous design guide site. However, the usage guidelines have been updated and can be viewed in the Photography & Illustration Guidelines.

Component Libraries

Guides to help implement and use the MooDXD UI toolkit using other frameworks.

Overview

There are currently two libraries available to help implement the Design System for projects in React or Vue.

(The documentation to the component libraries is currently unavailable on this site at this time. In the meantime, it is recommended you check out the library and spin up the documentation locally. We are working on getting the documentation back, and hope to have that done soon.)