Palette

Overview

Color palettes play a crucial role in establishing a unified visual identity and enhancing the user experience. Designers and developers can ensure a cohesive color scheme by adhering to these predefined palettes.

Understanding our color palette

Neutral Colors

Neutral colors help maintain clarity, readability, and a visually pleasing user experience.

Background Colors

Light mode UIs are predominantly white and can use gray light 3 as a secondary background color. Dark Mode UIs are predominantly MongoDB Black and can use gray dark 4 as a secondary background color.

Accent Colors

Primary colors serve as a key component for brand recognition, visual hierarchy, interactivity, and conveying important information to users.

Green: It is frequently used for buttons and interactive elements to draw attention and prompt user actions. Usage of primary color can make CTAs stand out, encouraging users to click or engage with them. Also, the primary green color can be used to indicate a successful state.
Blue: It is typically used for links or to call attention to information that needs to stand out.
Yellow: It is used for communicating content warnings, yellow effectively conveys a cautionary status.
Red: It is reserved for signaling critical errors, failures, or disabled content, red ensures users immediately recognize and address urgent issues.

Alternative Colors

Purple is considered a tertiary color. It can serve as a decorative element, such as a brand shape used in the background, or be applied to elements that don't necessarily require to convey content status.

Color Accessibility

Contrast requirements for WCAG AA compliance, and best practices for supporting vision-impaired users. View our accessibility guidelines to learn more.

The non-decorative text must have a 4.5:1 contrast ratio with its background. If the text appears above a gradient or shadow, use the lightest point in that gradient as the background color when checking the text contrast.
Non-text information like icons or images conveying information used to understand the interface should meet a 3:1 contrast ratio.
Disabled elements like buttons or inputs do not need to meet contrast requirements, but labels associated with them should.
When colored text is used to convey the meaning behind the text in an interface (such as red error and green success messages), use an icon to supplement the text to provide an additional cue to those with poor color vision.

Non-text information

When working with type, make sure that your copy passes accessibility constraints. You can check this by installing Contrast, a contrast checker plugin for Figma. Non-text information like icons or images conveying information used to understand the interface should meet a 3:1 contrast ratio. Make sure to use a color Gray Base or darker for the icons.

Typography

When working with type, make sure that your copy passes accessibility constraints. You can check this by installing Contrast, a contrast checker plugin for Figma. Remember the 4.5:1 contrast rule. If the contrast between the color of your text and its background is 4.5:1 or higher it’s accessible; if it’s lower it’s not. For more contrast constraints consult our accessibility guidelines.

Dark mode

In the instances where a designer is working on Dark mode UIs that use non-LeafyGreen components, use this chart as a reference for what colors to use.

Usage	Role	Value
Primary text	Default body copy; Headers; Input Labels	Gray/Light 2 —————————— #E8EDEB
Secondary text	Secondary body copy; Input descriptions	Gray/Light 1 —————————— #C1C7C6
Icon color	Use for default icon colors	Gray/Light 1 —————————— #C1C7C6
Disabled text	Copy for disabled labels and descriptions	Gray/Base —————————— #889397
Border	Use for menu borders or dividers	Gray/Dark 2 —————————— #3D4F58
Link	Use for any text links	Blue/Light 1 —————————— #0498EC
Primary background	Use for the primary background fill	MDB Black —————————— #001E2B
Secondary background	Use for the secondary background fill	Gray/Dark4 —————————— #112733