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

tp-color-neutral

Android

tp_color_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

tp-color-neutral

Android

tp_color_neutral

scss

$tp-color-neutral

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

tp-color-neutral

Android

tp_color_neutral

scss

$tp-color-neutral

Gray 200

Subtle awareness with no intention for color or feedback

Hex

#fafafa

Javascript

tp-color-neutral

Android

tp_color_neutral

scss

$tp-color-neutral

Gray 300

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

Hex

#e9eced

Javascript

tp-color-neutral

Android

tp_color_neutral

scss

$tp-color-neutral

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

tp-color-neutral

Android

tp_color_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

tp-color-blue

Android

tp_color_blue

scss

$tp-color-blue

Blue 300

Disabled primary backgrounds

Hex

#79d2f2

Javascript

tp-color-blue

Android

tp_color_blue

scss

$tp-color-blue

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

tp-color-blue

Android

tp_color_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

tp-color-blue

Android

tp_color_blue

scss

$tp-color-blue

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

tp-color-blue

Android

tp_color_blue

scss

$tp-color-blue

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

tp-color-indigo

Android

tp_color_indigo

scss

$tp-color-indigo

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

tp-color-indigo

Android

tp_color_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

tp-color-indigo

Android

tp_color_indigo

scss

$tp-color-indigo

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

tp-color-indigo

Android

tp_color_indigo

scss

$tp-color-indigo

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

tp-color-purple

Android

tp_color_purple

scss

$tp-color-purple

Purple 500

Text color on default neutral surface

Hex

#6637b6

Javascript

tp-color-purple

Android

tp_color_purple

scss

$tp-color-purple

Purple core

Icon color on a default neutral surface

Hex

#8d56eb

Javascript

tp-color-purple

Android

tp_color_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 success, completion, (ex: savings, discounts, revenue growth, etc) and ratings

Hex

#e1fdf3

Javascript

tp-color-green

Android

tp_color_green

scss

$tp-color-green

Green core

Important success moments success, completion, (ex: savings, discounts, revenue growth, etc) and ratings
Text color on default neutral surface success, completion, (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 success, completion, (ex: savings, discounts, revenue growth, etc)

Hex

#2db783

Javascript

tp-color-green

Android

tp_color_green

scss

$tp-color-green

Green 500

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

Hex

#16855b

Javascript

tp-color-green

Android

tp_color_green

scss

$tp-color-green

Green 600

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

Hex

#054e33

Javascript

tp-color-green

Android

tp_color_green

scss

$tp-color-green

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

tp-color-red

Android

tp_color_red

scss

$tp-color-red

Red 300

Disabled alert backgrounds

Hex

#ffb0b0

Javascript

tp-color-red

Android

tp_color_red

scss

$tp-color-red

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

tp-color-red

Android

tp_color_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

tp-color-red

Android

tp_color_red

scss

$tp-color-red

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

tp-color-red

Android

tp_color_red

scss

$tp-color-red

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

tp-color-yellow

Android

tp_color_yellow

scss

$tp-color-yellow

Yellow core

Important caution moments
Icon color on a default neutral surface (ex: downward trends)

Hex

#febe14

Javascript

tp-color-yellow

Android

tp_color_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

tp-color-yellow

Android

tp_color_yellow

scss

$tp-color-yellow

Examples

user interface example where yellow colors are applied