Tokens

Design variables that power Thumbtack’s UI.

Color

These are the colors we use at Thumbtack.

Token Name Value

tp_blue_100

#eaf6fa

tp_blue_200

#b3ebff

tp_blue_300

#79d2f2

tp_blue

#009fd9

tp_blue_500

#007fad

tp_blue_600

#005979

tp_indigo_100

#e8f1fd

tp_indigo_200

#cce1ff

tp_indigo_300

#96c2ff

tp_indigo

#5968e2

tp_indigo_500

#4f54b3

tp_indigo_600

#383c80

tp_purple_100

#f5efff

tp_purple_200

#dfccff

tp_purple_300

#c9acfd

tp_purple

#8d56eb

tp_purple_500

#6637b6

tp_purple_600

#492782

tp_green_100

#e1fdf3

tp_green_200

#c6f7da

tp_green_300

#73e4a2

tp_green

#2db783

tp_green_500

#16855b

tp_green_600

#054e33

tp_yellow_100

#fdf7e7

tp_yellow_200

#ffebb3

tp_yellow_300

#ffdd80

tp_yellow

#febe14

tp_yellow_500

#a77005

tp_yellow_600

#714601

tp_red_100

#ffeff0

tp_red_200

#ffd9d9

tp_red_300

#ffb0b0

tp_red

#ff5a5f

tp_red_500

#b22d31

tp_red_600

#7d0d10

tp_black_300

#676d73

tp_black

#2f3033

tp_gray_200

#fafafa

tp_gray_300

#e9eced

tp_gray

#d3d4d5

tp_white

#ffffff

Corner Radius

Token Name Value

`tp_corner_radius_base`	`4dp`
`tp_corner_radius_big`	`6dp`

Duration

Token Name Value

`tp_duration_1`	`75`
`tp_duration_2`	`150`
`tp_duration_3`	`200`
`tp_duration_4`	`250`
`tp_duration_5`	`300`
`tp_duration_6`	`350`

Font Weight

Token Name Value

`tp_font_weight_normal`	`400`
`tp_font_weight_bold`	`700`

Font

Token Name Value

`tp_title_1_size`	`28sp`
`tp_title_1_line_height`	`32sp`
`tp_title_1_weight`	`700`

`tp_title_2_size`	`24sp`
`tp_title_2_line_height`	`28sp`
`tp_title_2_weight`	`700`

`tp_title_3_size`	`22sp`
`tp_title_3_line_height`	`28sp`
`tp_title_3_weight`	`700`

`tp_title_4_size`	`20sp`
`tp_title_4_line_height`	`28sp`
`tp_title_4_weight`	`700`

`tp_title_5_size`	`18sp`
`tp_title_5_line_height`	`24sp`
`tp_title_5_weight`	`700`

`tp_title_6_size`	`16sp`
`tp_title_6_line_height`	`24sp`
`tp_title_6_weight`	`700`

`tp_title_7_size`	`14sp`
`tp_title_7_line_height`	`20sp`
`tp_title_7_weight`	`700`

`tp_title_8_size`	`12sp`
`tp_title_8_line_height`	`18sp`
`tp_title_8_weight`	`700`

`tp_body_1_size`	`16sp`
`tp_body_1_line_height`	`24sp`
`tp_body_1_weight`	`400`

`tp_body_2_size`	`14sp`
`tp_body_2_line_height`	`20sp`
`tp_body_2_weight`	`400`

`tp_body_3_size`	`12sp`
`tp_body_3_line_height`	`18sp`
`tp_body_3_weight`	`400`

Letter Spacing

Token Name Value

`tp_letter_spacing_loose`	`1sp`
`tp_letter_spacing_tight`	`-1sp`
`tp_letter_spacing_extra_tight`	`-2sp`

Scrim

Values for transparent light and dark curtains that cover content.

Token Name Value

tp_scrim_light_80

#ccffffff

tp_scrim_dark_80

#cc000000

Space

Token Name Value

`tp_space_1`	`4dp`
`tp_space_2`	`8dp`
`tp_space_3`	`16dp`
`tp_space_4`	`24dp`
`tp_space_5`	`32dp`
`tp_space_6`	`48dp`