Color
Color is a foundational part of the LiveRamp visual system. It's a powerful tool that helps us connect with our audience on a nonverbal, emotional level.
Primary Palette
LiveRamp’s color system is bold and high-contrast. Our Primary Green is electric, imbuing the brand with a sense of energy, growth, and momentum, with black and white providing a sleek foundation.
Our three primary colors are White, Black, and Green 00 (our Primary Green). Green 00 should appear in every design.
Secondary Palettes
For some applications, you might need a broader palette. We use these colors for times when the three primary colors don’t offer enough flexibility or nuance. Lighter or darker shades of green and grey should never substitute Green 00 or Black as primary colors.
Note: Refer to the type colors in each swatch for the correct contrasting color for type, etc.
Greens
Greys
Note: Cool Greys should only be used for UI elements, divider lines, etc. For color floods, default to the Warm Grey palette.
Don't do this
Don’t create additional color stops outside of the provided palettes
Don’t introduce new hues
Tertiary Palette
When the secondary palettes have been exhausted, we have a tertiary palette of blues that allow for differentiation and contrast, e.g. in data visualizations.
None of these colors should replace primary brand colors. They should only be used in the specific instances in which a contrast in hue is necessary from accessibility standards. If in doubt, contact the brand team at Brand@LiveRamp.com.
Note: Refer to the type colors in each swatch for the correct contrasting color for type, etc.
Blues
Do this
Do exhaust the entirety of the secondary green shades before leveraging blue
Do retain visual contrast between colors when differentiating data sets
Don't do this
Don’t use tertiary colors as a primary or accents
Color Hierarchy
We prioritize Primary Green and White in our designs, and keep other colors in proportion. Primary Green and White must be the two most dominant colors in a design. Do not use black as a dominant color.
Layouts should have a minimum of two colors and a maximum of four colors – please see example ratios below.
Do this
Do leverage color blocking according to color hierarchy to add visual interest
Always include Primary Green in your design
Don't do this
Don’t use a shade darker than Green 00 as a dominant color
Don’t use black as a primary color application
Accessibility
Considering accessibility needs is a paramount part of the LiveRamp design system, color included. Below are swatch guides to consider when designing for color vision deficiency. For contrast guidelines when using type, see the Typography guideline page. The below are conversions for Color Vision Deficiency.
No Changes
Tritanomaly
Deuteranopia
Deuteranomaly
Protanopia
Protanomaly
Tritanopia
Achromatomaly
Achromatopsia
