Visual
Color
Sprout uses a flexible color palette to achieve clean interfaces and captivating brand experiences.
Brand color palette
Sprout’s Brand color palette is comprised of our Core colors, Primary colors, additional tints and shades, plus purple hues. Designs should begin with the Core and Primary palettes, and utilize additional colors as accents to create emphasis, variety, depth and contrast.
The Brand color palette should be used for all brand design work, including marketing campaigns, website designs, banner ads, event identity systems, and illustration.
In specialty use cases where additional colors are necessary, values from the Full color palette may be used. Examples of Full palette usage include button hover states, internal programs/design systems (I.e values, BRG logos), product shots and data visualization.
Core colors
Our name, Sprout, evokes strong imagery of growth in nature. Our green, an identifiable attribute of the brand, is a visual expression of this progress.
In addition to Sprout green , our Core colors include white and navy . They should be used for balance, contrast and cohesion.
Core color usage
Use the Core colors as a foundation for every project. should have a dominant presence in creative linked to the employer brand experience such as recruiting, onboarding, Sprout Values and Meet Team Sprout.
Aim to include a presence of Sprout green (Green 700) in compositions either through a color fill, a call to action or the leaf logo.
Consider the context of where your imagery will appear. Green 700 might already be present in the logo on the website header or the profile image on a social platform.Primary colors
Bold and sophisticated, our Primary colors should be integrated with the Core colors to exude confidence, energy and dimension. The family is led by a series of analogous colors that elevate and complement Sprout green . These colors can be used for large fills and backgrounds.
The string of warm, inviting accents in the palette add a humanistic spirit that encourages approachability. These colors should be used selectively to add energetic variety to compositions.
Primary color usage
When pairing colors, strive to maintain a 2:1 balance between cool and warm colors with cool colors having the stronger presence. Limit the use of warm colors to one or two per composition. Incorporate and for balance and contrast.
Follow accessibility standards and maintain proper contrast when placing color on color.
Allow color to vibrate when placing color on color.Brand palette examples
Humanistic palette
In addition to the Brand color palette, we also employ the use of a specialty Humanistic color palette for illustration. Our Brand palette communicates the boldness of our vision, but particularly within our Humanistic color palette it also communicates our authenticity.
Within these colors you will find our commitment to showing a diverse range of people with different skin, hair, lip and eye colors. These colors blend the authenticity of more naturalistic skin tones with the boldness of our Brand colors.
Humanistic color palette usage
Currently, the use case for the Humanistic color palette is primarily within the freehand illustration style. That said, in any situation where we are representing the human form—whether it’s an entire person or just a hand—use of the Humanistic color palette should be strongly considered.
As a general rule, the more representational the human form is in an illustration or graphic element, the more appropriate it is to use the Humanistic color palette. The more simplified, geometric or abstract the human form is in an illustration or graphic element, the more appropriate it would be to simply use colors from the Brand color palette.
Specific tips on usage
Skin color
Pick from the Humanistic base color palette. Make sure when using a specific base color that you are aware of underlying tone (either Y-yellow, R-red, P-pink or B-blue) and coordinate that with the clothing, hair and other associated colors on the person. A person with a skin tone that has a yellow undertone might not look great wearing a yellow shirt, for example.
Hair color
Hair colors can be pulled from base colors, accent colors, or the standard brand color palette. The key is to make sure that the hair color is visually distinct enough from the skin color to minimize color vibration. If there is a scene with a number of people, make sure to be selective in the amount of different hair colors you use because this could break down the cohesiveness of the color scheme. Try using some of the existing brand colors as hair colors to reduce the number of one-use hair colors.
Lip color
Since lip color can very so greatly and is a much visually smaller instance of color usage, it is easiest to pull from Brand and Humanistic colors and use directly (someone with bright red lipstick might use Accent R300) or overlay an existing Brand palette color on top of the skin tone being used on the person.
Eye color
Eye colors can be sourced easily from the Brand color palette for brighter eye colors (green and blue eyes), or from the skin tones palette for more neutral eye colors (hazels and browns). 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.
Product color palette
Actions
Type
Common UI
Color finder
Enter a hex color value to find the closest Seeds color token match.