Thumbprint logo

Tokens

Design variables that power Thumbtack’s UI.

Color

These are the colors we use at Thumbtack.

Token NameValue
Color.blue100

Blue 100 – #eaf6fa

UIColor = UIColor(red: 0.91764706, green: 0.9647059, blue: 0.98039216, alpha: 1.0)
Color.blue200

Blue 200 – #b3ebff

UIColor = UIColor(red: 0.7019608, green: 0.92156863, blue: 1.0, alpha: 1.0)
Color.blue300

Blue 300 – #79d2f2

UIColor = UIColor(red: 0.4745098, green: 0.8235294, blue: 0.9490196, alpha: 1.0)
Color.blue

Blue – #009fd9

UIColor = UIColor(red: 0.0, green: 0.62352943, blue: 0.8509804, alpha: 1.0)
Color.blue500

Blue 500 – #007fad

UIColor = UIColor(red: 0.0, green: 0.49803922, blue: 0.6784314, alpha: 1.0)
Color.blue600

Blue 600 – #005979

UIColor = UIColor(red: 0.0, green: 0.349, blue: 0.475, alpha: 1.0)
Color.indigo100

Indigo 100 – #e8f1fd

UIColor = UIColor(red: 0.9098039, green: 0.94509804, blue: 0.99215686, alpha: 1.0)
Color.indigo200

Indigo 200 – #cce1ff

UIColor = UIColor(red: 0.8, green: 0.88235295, blue: 1.0, alpha: 1.0)
Color.indigo300

Indigo 300 – #96c2ff

UIColor = UIColor(red: 0.5882353, green: 0.7607843, blue: 1.0, alpha: 1.0)
Color.indigo

Indigo – #5968e2

UIColor = UIColor(red: 0.34901962, green: 0.40784314, blue: 0.8862745, alpha: 1.0)
Color.indigo500

Indigo 500 – #4f54b3

UIColor = UIColor(red: 0.30980393, green: 0.32941177, blue: 0.7019608, alpha: 1.0)
Color.indigo600

Indigo 600 – #383c80

UIColor = UIColor(red: 0.21960784, green: 0.23529412, blue: 0.5019608, alpha: 1.0)
Color.purple100

Purple 100 – #f5efff

UIColor = UIColor(red: 0.9607843, green: 0.9372549, blue: 1.0, alpha: 1.0)
Color.purple200

Purple 200 – #dfccff

UIColor = UIColor(red: 0.8745098, green: 0.8, blue: 1.0, alpha: 1.0)
Color.purple300

Purple 300 – #c9acfd

UIColor = UIColor(red: 0.788, green: 0.675, blue: 0.992, alpha: 1.0)
Color.purple

Purple – #8d56eb

UIColor = UIColor(red: 0.553, green: 0.337, blue: 0.922, alpha: 1.0)
Color.purple500

Purple 500 – #6637b6

UIColor = UIColor(red: 0.4, green: 0.216, blue: 0.714, alpha: 1.0)
Color.purple600

Purple 600 – #492782

UIColor = UIColor(red: 0.285, green: 0.153, blue: 0.508, alpha: 1.0)
Color.green100

Green 100 – #e1fdf3

UIColor = UIColor(red: 0.88235295, green: 0.99215686, blue: 0.9529412, alpha: 1.0)
Color.green200

Green 200 – #c6f7da

UIColor = UIColor(red: 0.7764706, green: 0.96862745, blue: 0.85490197, alpha: 1.0)
Color.green300

Green 300 – #73e4a2

UIColor = UIColor(red: 0.4509804, green: 0.89411765, blue: 0.63529414, alpha: 1.0)
Color.green

Green – #2db783

UIColor = UIColor(red: 0.1764706, green: 0.7176471, blue: 0.5137255, alpha: 1.0)
Color.green500

Green 500 – #16855b

UIColor = UIColor(red: 0.086, green: 0.522, blue: 0.357, alpha: 1.0)
Color.green600

Green 600 – #054e33

UIColor = UIColor(red: 0.02, green: 0.306, blue: 0.2, alpha: 1.0)
Color.yellow100

Yellow 100 – #fdf7e7

UIColor = UIColor(red: 0.99215686, green: 0.96862745, blue: 0.90588236, alpha: 1.0)
Color.yellow200

Yellow 200 – #ffebb3

UIColor = UIColor(red: 1.0, green: 0.92156863, blue: 0.7019608, alpha: 1.0)
Color.yellow300

Yellow 300 – #ffdd80

UIColor = UIColor(red: 1.0, green: 0.8666667, blue: 0.5019608, alpha: 1.0)
Color.yellow

Yellow – #febe14

UIColor = UIColor(red: 0.99607843, green: 0.74509805, blue: 0.078431375, alpha: 1.0)
Color.yellow500

Yellow 500 – #a77005

UIColor = UIColor(red: 0.654, green: 0.438, blue: 0.019, alpha: 1.0)
Color.yellow600

Yellow 600 – #714601

UIColor = UIColor(red: 0.442, green: 0.273, blue: 0.004, alpha: 1.0)
Color.red100

Red 100 – #ffeff0

UIColor = UIColor(red: 1.0, green: 0.9372549, blue: 0.9411765, alpha: 1.0)
Color.red200

Red 200 – #ffd9d9

UIColor = UIColor(red: 1.0, green: 0.8509804, blue: 0.8509804, alpha: 1.0)
Color.red300

Red 300 – #ffb0b0

UIColor = UIColor(red: 1.0, green: 0.6901961, blue: 0.6901961, alpha: 1.0)
Color.red

Red – #ff5a5f

UIColor = UIColor(red: 1.0, green: 0.3529412, blue: 0.37254903, alpha: 1.0)
Color.red500

Red 500 – #b22d31

UIColor = UIColor(red: 0.808, green: 0.209, blue: 0.266, alpha: 1.0)
Color.red600

Red 600 – #7d0d10

UIColor = UIColor(red: 0.492, green: 0.051, blue: 0.065, alpha: 1.0)
Color.black300

Black 300 – #676d73

UIColor = UIColor(red: 0.40392157, green: 0.42745098, blue: 0.4509804, alpha: 1.0)
Color.black

Black – #2f3033

UIColor = UIColor(red: 0.18431373, green: 0.1882353, blue: 0.2, alpha: 1.0)
Color.gray200

Gray 200 – #fafafa

UIColor = UIColor(red: 0.98039216, green: 0.98039216, blue: 0.98039216, alpha: 1.0)
Color.gray300

Gray 300 – #e9eced

UIColor = UIColor(red: 0.9137255, green: 0.9254902, blue: 0.92941177, alpha: 1.0)
Color.gray

Gray – #d3d4d5

UIColor = UIColor(red: 0.827451, green: 0.83137256, blue: 0.8352941, alpha: 1.0)
Color.white

White – #ffffff

UIColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)

Corner Radius

Token NameValue
deprecatedCorner Radius.baseCGFloat = 4

Duration

Token NameValue
Duration.oneTimeInterval = 0.075
Duration.twoTimeInterval = 0.15
Duration.threeTimeInterval = 0.2
Duration.fourTimeInterval = 0.25
Duration.fiveTimeInterval = 0.3
Duration.sixTimeInterval = 0.35

Font Weight

Token NameValue
Font Weight.normalnormal
Font Weight.boldbold

Font

Token NameValue
Font.title1SizeCGFloat = 28
Font.title1WeightFontWeight = .bold
Font.title1UIFontTextStyleUIFont.TextStyle = .headline
Font.title2SizeCGFloat = 24
Font.title2WeightFontWeight = .bold
Font.title2UIFontTextStyleUIFont.TextStyle = .subheadline
Font.title3SizeCGFloat = 22
Font.title3WeightFontWeight = .bold
Font.title3UIFontTextStyleUIFont.TextStyle = .title1
Font.title4SizeCGFloat = 20
Font.title4WeightFontWeight = .bold
Font.title4UIFontTextStyleUIFont.TextStyle = .title2
Font.title5SizeCGFloat = 18
Font.title5WeightFontWeight = .bold
Font.title5UIFontTextStyleUIFont.TextStyle = .title3
Font.title6SizeCGFloat = 16
Font.title6WeightFontWeight = .bold
Font.title6UIFontTextStyleUIFont.TextStyle = .body
Font.title7SizeCGFloat = 14
Font.title7WeightFontWeight = .bold
Font.title7UIFontTextStyleUIFont.TextStyle = .body
Font.title8SizeCGFloat = 12
Font.title8WeightFontWeight = .bold
Font.title8UIFontTextStyleUIFont.TextStyle = .body
Font.text1SizeCGFloat = 16
Font.text1WeightFontWeight = .normal
Font.text1UIFontTextStyleUIFont.TextStyle = .body
Font.text2SizeCGFloat = 14
Font.text2WeightFontWeight = .normal
Font.text2UIFontTextStyleUIFont.TextStyle = .body
Font.text3SizeCGFloat = 12
Font.text3WeightFontWeight = .normal
Font.text3UIFontTextStyleUIFont.TextStyle = .body

Scrim

Values for transparent light and dark curtains that cover content.

Token NameValue
Scrim.light80
UIColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.8)
Scrim.dark80
UIColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.8)

Space

Token NameValue
Space.one

Space 1 – 4.0pt

CGFloat = 4.0
Space.two

Space 2 – 8.0pt

CGFloat = 8.0
Space.three

Space 3 – 16.0pt

CGFloat = 16.0
Space.four

Space 4 – 24.0pt

CGFloat = 24.0
Space.five

Space 5 – 32.0pt

CGFloat = 32.0
Space.six

Space 6 – 48.0pt

CGFloat = 48.0