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

Highly important messaging with no intention for color or feedback (ex: Toast)
Copy on an active neutral or low emphasis surface
Copy on a default neutral or low emphasis surfaces (ex: headings, links)
Default icon color on neutral surfaces
Icon color caution on 100-level neutral surfaces or paired with text of same color value (ex: downward trends)
Links on neutral surfaces with long lists or groupings of links (ex: footer)

Hex

#2f3033

Javascript

tpColorNeutral

Android

tp_neutral

scss

$tp-color__neutral

Black 300

Default border on medium or with strong neutral backgrounds
Body copy on a default neutral surface color

Hex

#676d73

Javascript

tpColorNeutral300

Android

tp_neutral_300

scss

$tp-color__neutral-300

Gray

Default border on low or neutral backgrounds (also used with neutral backgrounds with low emphasis) and on interactive elements (ex: TextInput)
Icon color indicating empty states for icons (ex: empty star rating")

Hex

#d3d4d5

Javascript

tpColorNeutral

Android

tp_neutral

scss

$tp-color__neutral

Gray 200

Subtle awareness with no intention for color or feedback

Hex

#fafafa

Javascript

tpColorNeutral200

Android

tp_neutral_200

scss

$tp-color__neutral-200

Gray 300

Default border on neutral surfaces
Medium emphasis with no intention for color or feedback (ex: Messenger reply bubble)

Hex

#e9eced

Javascript

tpColorNeutral300

Android

tp_neutral_300

scss

$tp-color__neutral-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

Interactive moments when hovering over default neutral backgrounds
Selected or active neutral backgrounds over default neutral backgrounds
Backgrounds for primary moments

Hex

#eaf6fa

Javascript

tpColorBlue100

Android

tp_blue_100

scss

$tp-color__blue-100

Blue 300

Disabled primary backgrounds

Hex

#79d2f2

Javascript

tpColorBlue300

Android

tp_blue_300

scss

$tp-color__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

Highest level of importance for primary moments
Text color on default neutral default
Icon color primary on default neutral surfaces or paired with text of same color value
Links on blue 100-level or gray 300 surfaces

Hex

#007fad

Javascript

tpColorBlue500

Android

tp_blue_500

scss

$tp-color__blue-500

Blue 600

Text color on 100-level primary surfaces
Icon color primary on 100-level blue surfaces or paired with text of same color value

Hex

#005979

Javascript

tpColorBlue600

Android

tp_blue_600

scss

$tp-color__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

Backgrounds for guidance moments

Hex

#e8f1fd

Javascript

tpColorIndigo100

Android

tp_indigo_100

scss

$tp-color__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

Highest level of importance for guidance moments
Text color on default neutral default
Icon color guidance on default neutral surfaces or paired with text of same color value

Hex

#4f54b3

Javascript

tpColorIndigo500

Android

tp_indigo_500

scss

$tp-color__indigo-500

Indigo 600

Text color on 100-level guidance surfaces
Icon color guidance on 100-level indigo surfaces or paired with text of same color value

Hex

#383c80

Javascript

tpColorIndigo600

Android

tp_indigo_600

scss

$tp-color__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

Subtle background for accent purposes

Hex

#f5efff

Javascript

tpColorPurple100

Android

tp_purple_100

scss

$tp-color__purple-100

Purple 500

Text color on default neutral surface

Hex

#6637b6

Javascript

tpColorPurple500

Android

tp_purple_500

scss

$tp-color__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

Backgrounds for success moments (ex: savings, discounts, revenue growth, etc) and ratings

Hex

#e1fdf3

Javascript

tpColorGreen100

Android

tp_green_100

scss

$tp-color__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

Highest level of importance for success moments (ex: savings, discounts, revenue growth, etc) and ratings
Text color on default neutral default (ex: savings, discounts, revenue growth, etc)
Icon color success on default neutral surfaces or paired with text of same color value (ex: savings, discounts, revenue growth, etc)

Hex

#16855b

Javascript

tpColorGreen500

Android

tp_green_500

scss

$tp-color__green-500

Green 600

Text color on 100-level success surfaces (ex: savings, discounts, revenue growth, etc)
Icon color success on 100-level green surfaces or paired with text of same color value (ex: savings, discounts, revenue growth, etc)

Hex

#054e33

Javascript

tpColorGreen600

Android

tp_green_600

scss

$tp-color__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

Backgrounds for alert moments

Hex

#ffeff0

Javascript

tpColorRed100

Android

tp_red_100

scss

$tp-color__red-100

Red 300

Disabled alert backgrounds

Hex

#ffb0b0

Javascript

tpColorRed300

Android

tp_red_300

scss

$tp-color__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

Text color on default neutral default (ex: revenue loss)
Icon color alert on default neutral surfaces or paired with text of same color value (ex: revenue loss)

Hex

#b22d31

Javascript

tpColorRed500

Android

tp_red_500

scss

$tp-color__red-500

Red 600

Highest level of importance for alert moments
Text color on 100-level alert surfaces (ex: revenue loss)
Icon color alert on 100-level red surfaces or paired with text of same color value (ex: revenue loss)

Hex

#7d0d10

Javascript

tpColorRed600

Android

tp_red_600

scss

$tp-color__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

Backgrounds for caution moments

Hex

#fdf7e7

Javascript

tpColorYellow100

Android

tp_yellow_100

scss

$tp-color__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

Highest level of importance for caution moments
Text color on 100-level caution surfaces (ex: downward trends)
Icon color caution on default neutral surfaces or paired with text of same color value (ex: downward trends)

Hex

#714601

Javascript

tpColorYellow600

Android

tp_yellow_600

scss

$tp-color__yellow-600

Examples

user interface example where yellow colors are applied