Thumbprint logo

Tokens

Design variables that power Thumbtack’s UI.

Version:13.0.1 •View source•Changelog•Report issue
Install:pod 'ThumbprintTokens', '~> 13.0'
Import:import ThumbprintTokens

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
Corner Radius.base
CGFloat = 4

Duration

Token NameValue
Duration.one
TimeInterval = 0.075
Duration.two
TimeInterval = 0.15
Duration.three
TimeInterval = 0.2
Duration.four
TimeInterval = 0.25
Duration.five
TimeInterval = 0.3
Duration.six
TimeInterval = 0.35

Font Weight

Token NameValue
Font Weight.normal
normal
Font Weight.bold
bold

Font

Token NameValue
Font.title1Size
CGFloat = 28
Font.title1Weight
FontWeight = .bold
Font.title1UIFontTextStyle
UIFont.TextStyle = .headline
Font.title2Size
CGFloat = 24
Font.title2Weight
FontWeight = .bold
Font.title2UIFontTextStyle
UIFont.TextStyle = .subheadline
Font.title3Size
CGFloat = 22
Font.title3Weight
FontWeight = .bold
Font.title3UIFontTextStyle
UIFont.TextStyle = .title1
Font.title4Size
CGFloat = 20
Font.title4Weight
FontWeight = .bold
Font.title4UIFontTextStyle
UIFont.TextStyle = .title2
Font.title5Size
CGFloat = 18
Font.title5Weight
FontWeight = .bold
Font.title5UIFontTextStyle
UIFont.TextStyle = .title3
Font.title6Size
CGFloat = 16
Font.title6Weight
FontWeight = .bold
Font.title6UIFontTextStyle
UIFont.TextStyle = .body
Font.title7Size
CGFloat = 14
Font.title7Weight
FontWeight = .bold
Font.title7UIFontTextStyle
UIFont.TextStyle = .body
Font.title8Size
CGFloat = 12
Font.title8Weight
FontWeight = .bold
Font.title8UIFontTextStyle
UIFont.TextStyle = .body
Font.text1Size
CGFloat = 16
Font.text1Weight
FontWeight = .normal
Font.text1UIFontTextStyle
UIFont.TextStyle = .body
Font.text2Size
CGFloat = 14
Font.text2Weight
FontWeight = .normal
Font.text2UIFontTextStyle
UIFont.TextStyle = .body
Font.text3Size
CGFloat = 12
Font.text3Weight
FontWeight = .normal
Font.text3UIFontTextStyle
UIFont.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