Sprout uses a dynamic and flexible color system to develop unexpected and relatable brand experiences with intention.

Color system

Foundational Palette

Our name, Sprout, evokes strong imagery of growth in nature which is visually embodied within the confidence and relatability of our foundational and secondary colors. Spruce and Midnight, used primarily for CTAs and type, are identifiable attributes of the brand that recall and pay tribute to Sprout’s legacy.

Onyx and Snowcap provide intentional simplicity and accessibility throughout communications. These colors should be used for backgrounds, type and as accents.

Secondary Palette

Jewel Tones

Historically a symbol of wealth and power, jewel tones, when incorporated into designs provide a sense of distinction and mastery.

This palette, evocative of and distilled from nature, is high in color saturation making each value dynamic and eye-catching.

Accent Mid-Tones

Strong, bright colors can have a powerful and unexpected effect on emotions. These energizing values grab your attention and stand out in their surroundings.

Accent Light-Tones

Optimistic and happy, these relatable values bring harmony to designs when paired with darker and lighter tones. Their lively and upbeat presence embodies positivity and pride.

Muted Tones

A clear and graceful palette, the purity of these values elicits openness and relaxation. Their calming and peaceful demeanor provides intentional balance to deeper jewel tones and vibrant mid-tones.

Extended Neutrals

Extended neutrals are reserved for web interface ui: as backgrounds or borders when a secondary color isn’t fitting and as an accessible type color for copy that requires less emphasis. Extended neutrals should be used sparingly.

Recommended colorways

Sprout’s brand color system provides creators with a variety of flexible options to develop compelling and memorable visual communications. These recommended colorways ensure brand consistency and cohesion across all marketing channels while prioritizing accessibility.

The diagram below details how colorways work together to create intentional and balanced designs by combining colors through backgrounds, linework and typography.

Monochromatic

Monochromatic colorways include tints, shades and tones of a single color. Monochromatic schemes range between lighter and darker values of the base color to create interest and depth. These colorways are classic, elegant, and versatile. They can be used in a variety of designs to create a sense of mastery or to make a design feel relatable.

Complementary

Complementary colorways use one primary color and that color’s direct complement from the opposite side of the color wheel. The primary color is dominant in designs while the complement performs as an accent. This relationship displays a high-contrast combination that is unexpected and pops. Complementary schemes are natural, balanced illusions that occur in nature. They add energy and draw attention to moments of emphasis in designs.

Simplified Monochromatic or Complementary

Following the same reasoning and structure of the more complex monochromatic and complementary colorways above, these simplified schemes utilize a consistent color for both the headline and outline.

Gradients

Gradients are extremely versatile in designs, they can be bold or subtle, the focal point or a background texture. They provide visual interest and dimension that helps guide viewers through communications.

Gradients create new color combinations that feel unexpected and cutting edge, adding a unique feeling to designs. They provide endless opportunities and are not limited to two colors.

Recommended Colorways for Gradient Backgrounds

Inspired by regularly occurring analogous color groupings found in nature, these recommended colorways are composed of one dominant color, a supporting color and an accent color. These relatable color schemes have enough visual interest to create contrast while still feeling cohesive and complete. When using analogous colorways for gradient backgrounds, default to a simplified monochromatic treatment for linework and typography.

Gradient swatches

Gradients on Neutral Backgrounds

These recommended colorways may also be used to build gradients on neutral backgrounds by using Onyx, Background Gray or Snowcap to add depth and dimension. Be mindful of the mood each neutral value conveys.

Example Neutral Background Gradient Swatches

Tone on Tone Gradients

Monochromatic tone on tone gradients may be used to create subtle depth and dimension within designs and illuminate moments of emphasis.

Example Tone on Tone Gradient Swatches

Color useage gallery

Examples of Sprout’s brand color system in use.

Enterprise usage

While the entire Sprout color system intentionally caters to a sophisticated audience, the Enterprise palette—distilled from the brand color system—builds a stronger connection with this specific segment of our existing and future customer base. Seen as exclusive and reserved for brands of a certain prestige and status, this “black-label” treatment attracts new customers with intention - further deepening credibility and trust with Enterprise customers. An Enterprise specific palette makes it easier for our audience to quickly find the content and product set that is built specifically for them.

Enterprise Palette

Led by Midnight and Onyx, two colors indicative of sober authority and mastery, the enterprise palette uses an intentionally limited range of blues and teals. Blue is a color often associated with trust and intelligence that has been partnered with teal, a relatable color that promotes clarity, open communication and practical thinking.

Enterprise Palette Gallery

These are some examples that show the Enterprise palette in use.

Human tones

In addition to the brand color system, we also employ the use of specialty human tones for illustration. These colors show our commitment to representing a diverse range of people with unique skin, hair, lip and eye colors. The values blend the authenticity of humanistic tones with the relatable nature of our brand color system.

Humanistic usage

In any situation where we are representing the human form—whether it’s an entire person or just a hand—use of the human tones is strongly recommended. The more representational the human form is in an illustration or graphic element, the more appropriate it is to use the human tones.

Skin color

Base tones work best as skin colors. Be mindful of a base color’s undertones (noted in the value name as Y-yellow, R-red, P-pink or B-blue) when selecting hair, lip, eye and clothing colors. For example, a skin tone with yellow undertones may not pair well with yellow clothing.

Base tones

Hair color

Hair colors can be selected from base tones, accent tones or the brand color system. Hair color should be visually distinct from the skin color to minimize color vibration. When showing multiple people together in a scene, limit the number of different hair colors to avoid an overly complex color scheme.

Accent tones

Lip color

Lip tones are pulled from the brand color system and may be used at full saturation or placed on top of the base skin color using a blending mode overlay.

Eye color

Eye tones for brighter, colored eyes (blues and greens) are pulled from the brand color system. For deeper, neutral eyes (hazels and browns) select from the base tones. However, in most cases because of the scale of the illustration and the people in it, there will be no visible iris and the eye color can simply be drawn as a circle filled in Midnight.

Product color palette

Actions

Type

Common UI

Color finder

Enter a hex color value to find the closest Seeds color token match.

Full color palette

Usage

Using Color in code

Design token documentation