Guidelines

Palette

A simple system for interfaces and illustrations

Core colors are expanded into a range of values to support varying moments within the product. The usage patterns for each value below can be found in our usage page.

Neutral

Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.

Suggested use

Backgrounds, text, iconography, shadows.

Black
Black 300
Gray
Gray 200
Gray 300
White
  • Default background color with no meaning
  • Copy on any medium or strong surface color (ex: buttons, alerts)
  • Icon color on medium or strong emphasis backgrounds and colored surfaces (also used on medium and strong colored surfaces)
  • Links on medium or strong emphasis backgrounds (note: this text should use the underline style)
Hex
#ffffff
Javascript
tpColorNeutral
Android
tp_neutral
scss
$tp-color__neutral
Examples
user interface example where neutral colors are applied

Blue

Use to drive focus and immediate attention to primary product moments. Overuse of this color is discouraged, so we can focus on the moments that matter.

Suggested use

Buttons, links, information, progress, promotional moments, brand moments, selected states.

Blue 100
Blue 300
Blue core
  • Default border on neutral active background to add emphasis to selected or active states
  • Selected or active neutral backgrounds in smaller spaces (ex: Calendar days)
  • Important primary moments (ex: primary CTAs)
  • Text color on default neutral surface (bold text should be at least 18.5px and 24px for non-bold copy)
  • Icon color on a default neutral surface
  • Links on link on a default neutral surface
  • Hovering over neutral links.
Hex
#009fd9
Javascript
tpColorBlue
Android
tp_blue
scss
$tp-color__blue
Blue 500
Blue 600
Examples
user interface example where blue colors are applied

Indigo

Use as a secondary color to guide users through onboarding, user assistance, map overlays, and data visualizations.

Suggested use

Data visualizations, informational moments, user assistance.

Indigo 100
Indigo core
  • Important guidance moments
  • Text color on default neutral surface (bold text should be at least 18.5px and 24px for non-bold copy)
  • Icon color on a default neutral surface
Hex
#5968e2
Javascript
tpColorIndigo
Android
tp_indigo
scss
$tp-color__indigo
Indigo 500
Indigo 600
Examples
user interface example where indigo colors are applied

Purple

Use as a subtle background for accent purposes.

Suggested use

Data visualizations, informational moments, user assistance.

Purple 100
Purple 500
Purple core
  • Icon color on a default neutral surface
Hex
#8d56eb
Javascript
tpColorPurple
Android
tp_purple
scss
$tp-color__purple
Examples
user interface example where purple colors are applied

Green

Use for ratings or to express growth, upward trends, financial moments (cost figures, savings, discounts, etc..), and positive feedback.

Suggested use

Positive moments, savings, discounts, upward trends, growth, ratings.

Green 100
Green core
  • Important success moments (ex: savings, discounts, revenue growth, etc) and ratings
  • Text color on default neutral surface (ex: savings, discounts, revenue growth, etc) (bold text should be at least 18.5px and 24px for non-bold copy)
  • Icon color on a default neutral surface (ex: savings, discounts, revenue growth, etc)
Hex
#2db783
Javascript
tpColorGreen
Android
tp_green
scss
$tp-color__green
Green 500
Green 600
Examples
user interface example where green colors are applied

Red

Use sparingly to not deter from important moments that require the user’s immediate attention.

Suggested use

Feedback moments, alerts, negative impact, cancellations, deletions and urgency.

Red 100
Red 300
Red core
  • Important alert moments
  • Text color on default neutral surface (ex: revenue loss) (bold text should be at least 18.5px and 24px for non-bold copy)
  • Icon color on a default neutral surface (ex: revenue loss)
Hex
#ff5a5f
Javascript
tpColorRed
Android
tp_red
scss
$tp-color__red
Red 500
Red 600
Examples
user interface example where red colors are applied

Yellow

Use to bring additional energy to the ux and provide cautionary moments of user feedback.

Suggested use

Feedback with a subtle sense of caution. Commonly used in alerts and toasts.

Yellow 100
Yellow core
  • Important caution moments
  • Icon color on a default neutral surface (ex: downward trends)
Hex
#febe14
Javascript
tpColorYellow
Android
tp_yellow
scss
$tp-color__yellow
Yellow 600
Examples
user interface example where yellow colors are applied