Tokens

Tokens

Design variables that power Thumbtack’s UI.

Version:13.0.1 View sourceChangelogReport issue
Install:implementation 'com.github.thumbtack:thumbprint-tokens:v13.0.1'
Import:import com.github.thumbtack.thumbprinttokens.R

Color

These are the colors we use at Thumbtack.

Token NameValue
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 NameValue
tp_corner_radius_base
4dp
tp_corner_radius_big
6dp

Duration

Token NameValue
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 NameValue
tp_font_weight_normal
400
tp_font_weight_bold
700

Font

Token NameValue
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 NameValue
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 NameValue
tp_scrim_light_80
#ccffffff
tp_scrim_dark_80
#cc000000

Space

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