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

Foundational Palette

Sprout's foundational colors are utilized as the base for most backgrounds, text, and borders as grounding elements in Sprout's visual language.

These values provide intentional simplicity and accessibility throughout communications.

Core Palette

The core palette captures Sprout's evolution while staying true to its roots. The strategic blend of green, a color with enduring brand recognition, and the infusion of blue, symbolizing Sprout's authority and trust in the tech industry, effectively reshapes the notion of "core Sprout”.

These values should be used consistently across various brand applications to establish a strong and recognizable brand expression.

Secondary Palette

Sprout's secondary palette is comprised of jewel tones, accent mid plus light tones, and muted tones all of which are distilled from nature and compliment the distinction and mastery of the Core palette.

When using the Secondary palette, always include a presence of one of the Core colors. These values should be used to grab attention, bring harmony to designs and provide balance to the Foundational and Core palettes.

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.

Core brand

These recommended colorways should be incorporated across visual communications supporting the consideration and decision phases of the customer journey to build a strong and unified brand experience. When applied across a variety of marketing materials, the consistent application of these colorways ensures a seamless and recognizable brand presence.

Product focus

Product colorways should be employed across the entirety of the customer journey from awareness through decision when representing specific focuses, features and values of the product. After product adoption, continuing to maintain these colorways in customer onboarding and success communications will contribute to a consistent and visually cohesive post-purchase experience.

Publishing

Engagement

Analytics

Listening

Advocacy

Influencer marketing

Gradients

Gradients are extremely versatile in designs, they can be bold or subtle, the focal point or a background texture. Gradients should be strategically incorporated into designs to evoke a sense of depth and dimension, adding a layer of complexity and unexpectedness. Gradients are particularly effective in digital and web design, enhancing user experiences by creating a dynamic transition between colors that draws attention and guides the eye.

Core gradients

Core gradients are our most used gradients in Sprout's design ecosystem.

Product focus gradients

Product focus gradients are built from the product pillar color system and used primarily in spaces to add emphasis to product feature content, and within product images to bring attention to Sprout customers and social media users.

These product focused colorways can 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.

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

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