Color

The colors in Pando create a cohesive and familiar experience for USANA's many touch points. They represent the quality and nature of our brand and help our digital product users understand how to do what they want to do and get where they want to go.

Consistent use of color unifies our brand. Even minor inconsistencies can create disconnect and instability for our customers.

Types

In order to mitigate these instances of inconsistency, we have put together color palettes that can be used by packaging designers, interface designers, app developers, and anyone else who is creating USANA touch points to ensure that we are all drawing from a common source.

Primary palette

We use our primary palette across all of our physical and digital products, as well as across the entire brand. It is important to consider the content, platform, and user experience when choosing color schemes.

Blue

Blue is the most commonly used color for coloring our components. It's used in defaut and hover states, as well as buttons, links, pagination, notifications, badges, tabs, selectors, and sliders.

Blue 100

Blue 200

Blue 300

Blue 400

Blue 500

Blue 600

Grey

Grey is commonly used as a background and text color. Grey can be used as an intuitive background color, to draw focus to components, to create shadows and depth and as an indicator of interactive states such as hovering and disabled.

Grey 100

Grey 200

Grey 300

Grey 400

Grey 500

Grey 600

Grey 700

Grey 800

Grey 900

Green

Green is frequently associated with safety, celebration, and achievement. Green can be used for badges, buttons, notifications, toggles, tabs, text and links.

Green 100

Green 200

Green 300

Green 400

Green 500

Green 600

Teal

Teal is typically used as an accent color and should be used selectively. Teal can be used for badges, buttons, graphics, tabs, and links.

Teal 100

Teal 200

Teal 300

Teal 400

Teal 500

Teal 600

Spruce

Spruce is commonly used as an accent color and should be used judiciously. Spruce is used to create badges, buttons, graphics, and links.

Spruce 100

Spruce 200

Spruce 300

Spruce 400

Spruce 500

Spruce 600

Silver

Silver is often utilized as an accent color and should be used lightly. It may be used to design badges, buttons, graphics, and links.

Silver 100

Silver 200

Silver 300

Silver 400

Silver 500

Silver 600

Red

The color red is widely used in messages and error states to emphasize important information or actions. Red can be used for badges, buttons, notifications, toggles, text and links.

Red 100

Red 200

Red 300

Red 400

Red 500

Red 600

Fuchsia

Fuchsia is a color that is often used as an accent color and should be used sparingly. Spruce can be used to create badges, buttons, graphics, and links.

Fuchsia 100

Fuchsia 200

Fuchsia 300

Fuchsia 400

Fuchsia 500

Fuchsia 600

Rose

Rose should be used as a an accent color and should be used sparingly. This color can be used to make badges, buttons, graphics, and links.

Rose 100

Rose 200

Rose 300

Rose 400

Rose 500

Rose 600

Purple

Purple is an accent color that should be utilized with caution. Purple may also be used to create badges, buttons, visuals, and links.

Purple 100

Purple 200

Purple 300

Purple 400

Purple 500

Purple 600

Yellow

Yellow is a color that is widely used as an accent color, however it should be used with caution. The color yellow can be used to make badges, buttons, and links.

Yellow 100

Yellow 200

Yellow 300

Yellow 400

Yellow 500

Yellow 600

Secondary palette

Secondary colors aid in the contrast and brightness of our brand by allowing us to bring contrast to the layout and focus on the content.

Black 100

White 100

Impact 100

USANA China/Baby Care

蓝色 100

Baby Care 100

Guidelines

To mitigate inconsistency, we have compiled color palettes for packaging designers, interface designers, app developers, and anyone else who creates USANA touchpoints. This ensures we are all drawing from a common source.

Color needs to consider in your design:

Be expressive
Your USANA color scheme must be strong enough to support a wide range of purposes and messaging. Colors may be successfully muted, bolded, or even switched to express interaction states, and in each case, should contribute to overall brand cohesion.
Connect to the real world.
Customer touchpoints exist to service real, tangible products. They need to be informed by the core experience, with the broader color spectrum derived from it as much as possible.
Color should encourage creativity
Beauty and creativity are essential to effective communication and central to a meaningful customer relationship. Our color system needs to provide a framework that allows for unification without restricting creativity. We have product lines that vary wildly in the way they relate to their target customer base and our color system should be flexible enough to grow and expand to encapsulate new and different palettes without sacrificing structure or unification.
Emphasize accessibility
USANA’s color system is rooted by the idea that customers with limitations or disabilities will be supported across all touchpoints. Customers with poor eyesight, colorblindness, or any other visual or cognitive impairment impacted by applications of color should have as great a customer experience as anyone else.

Begin with black and white. It is crucial not to rely on color to convey critical information in your message.
Put the practical before the emotional. Reduce the complexity of color by focusing on functional requirements first.
Do follow accessibility guidelines.
Check Contrast Early & Ritually

Don't

Use color exclusively to convey meaning.
Use custom colors.
Use bright color for your body text.
Place colored text on a colored background.