Tokens

Tokens(JavaScript)

Design variables that power Thumbtack’s UI.

Version:10.1.3 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-tokens
Import:import * as tokens from '@thumbtack/thumbprint-tokens';

Border Radius

Token NameValue
tpBorderRadiusBase
4px
tpBorderRadiusBig
6px
tpBorderRadiusFull
50%
tpBorderRadiusSides
9999px

Breakpoint

Token NameValue
tpBreakpointLarge
1025px
tpBreakpointLargeValue
1025
tpBreakpointMedium
700px
tpBreakpointMediumValue
700
tpBreakpointSmall
481px
tpBreakpointSmallValue
481
tpBreakpointSplitViewMedium
1060px
tpBreakpointSplitViewMediumValue
1060
tpBreakpointSplitViewSmall
769px
tpBreakpointSplitViewSmallValue
769

Color

These are the colors we use at Thumbtack.

Token NameValue
tpColorBlue100
#eaf6fa
tpColorBlue200
#b3ebff
tpColorBlue300
#79d2f2
tpColorBlue
#009fd9
tpColorBlue500
#007fad
tpColorBlue600
#005a7a
tpColorIndigo100
#e8f1fd
tpColorIndigo200
#cce1ff
tpColorIndigo300
#96c2ff
tpColorIndigo
#5968e2
tpColorIndigo500
#4f54b3
tpColorIndigo600
#383c80
tpColorPurple100
#f5efff
tpColorPurple200
#dfccff
tpColorPurple300
#d3baff
tpColorPurple
#a97ff0
tpColorPurple500
#8a5ed6
tpColorPurple600
#502095
tpColorGreen100
#e1fdf3
tpColorGreen200
#c6f7da
tpColorGreen300
#73e4a2
tpColorGreen
#2db783
tpColorGreen500
#109e78
tpColorGreen600
#0f6648
tpColorYellow100
#fdf7e7
tpColorYellow200
#ffebb3
tpColorYellow300
#ffdd80
tpColorYellow
#febe14
tpColorYellow500
#d48300
tpColorYellow600
#8a5500
tpColorRed100
#ffeff0
tpColorRed200
#ffd9d9
tpColorRed300
#ffb0b0
tpColorRed
#ff5a5f
tpColorRed500
#cc3553
tpColorRed600
#76012c
tpColorBlack300
#676d73
tpColorBlack
#2f3033
tpColorGray200
#fafafa
tpColorGray300
#e9eced
tpColorGray
#d3d4d5
tpColorWhite
#ffffff

Duration

Token NameValue
tpDuration1
75ms
tpDuration2
150ms
tpDuration3
200ms
tpDuration4
250ms
tpDuration5
300ms
tpDuration6
350ms

Easing

Token NameValue
tpEaseIn
cubic-bezier(0.50, 0, 1, 1)
tpEaseOut
cubic-bezier(0, 0, 0.40, 1)
tpEaseInOut
cubic-bezier(0.45, 0, 0.40, 1)

Font Family

Token NameValue
tpFontFamilyBase
Mark, Avenir, Helvetica, Arial, sans-serif
tpFontFamilyMonospace
'Source Code Pro', monospace

Font Weight

Token NameValue
tpFontWeightNormal
400
tpFontWeightBold
700

Font

Token NameValue
tpFontTitle1Size
28px
tpFontTitle1LineHeight
32px
tpFontTitle1Weight
700
tpFontTitle1ResponsiveSize
40px
tpFontTitle1ResponsiveLineHeight
44px
tpFontTitle1ResponsiveWeight
700
tpFontTitle2Size
24px
tpFontTitle2LineHeight
28px
tpFontTitle2Weight
700
tpFontTitle2ResponsiveSize
32px
tpFontTitle2ResponsiveLineHeight
40px
tpFontTitle2ResponsiveWeight
700
tpFontTitle3Size
22px
tpFontTitle3LineHeight
28px
tpFontTitle3Weight
700
tpFontTitle3ResponsiveSize
24px
tpFontTitle3ResponsiveLineHeight
32px
tpFontTitle3ResponsiveWeight
700
tpFontTitle4Size
20px
tpFontTitle4LineHeight
28px
tpFontTitle4Weight
700
tpFontTitle5Size
18px
tpFontTitle5LineHeight
24px
tpFontTitle5Weight
700
tpFontTitle6Size
16px
tpFontTitle6LineHeight
24px
tpFontTitle6Weight
700
tpFontTitle7Size
14px
tpFontTitle7LineHeight
20px
tpFontTitle7Weight
700
tpFontTitle8Size
12px
tpFontTitle8LineHeight
18px
tpFontTitle8Weight
700
tpFontBody1Size
16px
tpFontBody1LineHeight
24px
tpFontBody2Size
14px
tpFontBody2LineHeight
20px
tpFontBody3Size
12px
tpFontBody3LineHeight
18px

Letter Spacing

Token NameValue
tpLetterSpacingLoose
1px
tpLetterSpacingTight
-1px
tpLetterSpacingExtraTight
-2px

Line Height

Token NameValue
tpLineHeightBase
1.6
tpLineHeightTight
1.4
tpLineHeightLoose
1.9

Shadow

Token NameValue
tpShadow100
0px 1px 3px rgba(0, 0, 0, 0.1)
tpShadow200
0px 2px 4px rgba(0, 0, 0, 0.15)
tpShadow300
0px 2px 7px rgba(0, 0, 0, 0.15)
tpShadow400
0px 2px 10px rgba(0, 0, 0, 0.2)
deprecatedtpShadowCard
0 -1px 1px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.16)

Scrim

Values for transparent light and dark curtains that cover content.

Token NameValue
tpScrimLight80
rgba(255, 255, 255, 0.8)
tpScrimDark80
rgba(0, 0, 0, 0.8)

Space

Token NameValue
tpSpace1
4px
tpSpace2
8px
tpSpace3
16px
tpSpace4
24px
tpSpace5
32px
tpSpace6
64px
tpSpace7
128px
tpSpace8
256px

Wrap

Token NameValue
tpWrapMaxWidth
946px
tpWrapNoPadWidth
1010px

Z-Index

Values to help stack Thumbprint UI components.

Token NameValue
tpZIndexModal
200