Tokens

Tokens

Design variables that power Thumbtack’s UI.

Version:8.1.1 View sourceChangelogReport issue
Install:pod 'ThumbprintTokens', '~> 8.1'
Import:import ThumbprintTokens

Color

These are the colors we use at Thumbtack.

Token NameValue
Color.blue100

Blue 100 – #eaf6fa

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

Blue 200 – #b3ebff

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

Blue 300 – #79d2f2

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

Blue – #009fd9

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

Blue 500 – #007fad

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

Blue 600 – #005a7a

UIColor(red: 0.0, green: 0.3529412, blue: 0.47843137, alpha: 1.0)
Color.indigo100

Indigo 100 – #e8f1fd

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

Indigo 200 – #cce1ff

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

Indigo 300 – #96c2ff

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

Indigo – #5968e2

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

Indigo 500 – #4f54b3

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

Indigo 600 – #383c80

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

Purple 100 – #f5efff

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

Purple 200 – #dfccff

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

Purple 300 – #d3baff

UIColor(red: 0.827451, green: 0.7294118, blue: 1.0, alpha: 1.0)
Color.purple

Purple – #a97ff0

UIColor(red: 0.6627451, green: 0.49803922, blue: 0.9411765, alpha: 1.0)
Color.purple500

Purple 500 – #8a5ed6

UIColor(red: 0.5411765, green: 0.36862746, blue: 0.8392157, alpha: 1.0)
Color.purple600

Purple 600 – #502095

UIColor(red: 0.3137255, green: 0.1254902, blue: 0.58431375, alpha: 1.0)
Color.green100

Green 100 – #e1fdf3

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

Green 200 – #c6f7da

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

Green 300 – #73e4a2

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

Green – #2db783

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

Green 500 – #109e78

UIColor(red: 0.0627451, green: 0.61960787, blue: 0.47058824, alpha: 1.0)
Color.green600

Green 600 – #0f6648

UIColor(red: 0.05882353, green: 0.4, blue: 0.28235295, alpha: 1.0)
Color.yellow100

Yellow 100 – #fdf7e7

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

Yellow 200 – #ffebb3

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

Yellow 300 – #ffdd80

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

Yellow – #febe14

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

Yellow 500 – #d48300

UIColor(red: 0.83137256, green: 0.5137255, blue: 0.0, alpha: 1.0)
Color.yellow600

Yellow 600 – #8a5500

UIColor(red: 0.5411765, green: 0.33333334, blue: 0.0, alpha: 1.0)
Color.red100

Red 100 – #ffeff0

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

Red 200 – #ffd9d9

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

Red 300 – #ffb0b0

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

Red – #ff5a5f

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

Red 500 – #cc3553

UIColor(red: 0.8, green: 0.20784314, blue: 0.3254902, alpha: 1.0)
Color.red600

Red 600 – #76012c

UIColor(red: 0.4627451, green: 0.003921569, blue: 0.17254902, alpha: 1.0)
Color.black300

Black 300 – #676d73

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

Black – #2f3033

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

Gray 200 – #fafafa

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

Gray 300 – #e9eced

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

Gray – #d3d4d5

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

White – #ffffff

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

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