Tokens

Design variables that power Thumbtack’s UI.

Border Radius

Token Name Value

deprecated`tpBorderRadiusBase`	`4px`
deprecated`tpBorderRadiusBig`	`6px`
`tpBorderRadiusXSmall`	`4px`
`tpBorderRadiusSmall`	`6px`
`tpBorderRadiusMedium`	`8px`
`tpBorderRadiusLarge`	`12px`
`tpBorderRadiusXLarge`	`16px`
`tpBorderRadiusXXLarge`	`24px`
`tpBorderRadiusFull`	`50%`
`tpBorderRadiusSides`	`9999px`

Breakpoint

Token Name Value

`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 Name Value

tpColorBlue100

#eaf6fa

tpColorBlue200

#b3ebff

tpColorBlue300

#79d2f2

tpColorBlue

#009fd9

tpColorBlue500

#007fad

tpColorBlue600

#005979

tpColorIndigo100

#e8f1fd

tpColorIndigo200

#cce1ff

tpColorIndigo300

#96c2ff

tpColorIndigo

#5968e2

tpColorIndigo500

#4f54b3

tpColorIndigo600

#383c80

tpColorPurple100

#f5efff

tpColorPurple200

#dfccff

tpColorPurple300

#c9acfd

tpColorPurple

#8d56eb

tpColorPurple500

#6637b6

tpColorPurple600

#492782

tpColorGreen100

#e1fdf3

tpColorGreen200

#c6f7da

tpColorGreen300

#73e4a2

tpColorGreen

#2db783

tpColorGreen500

#16855b

tpColorGreen600

#054e33

tpColorYellow100

#fdf7e7

tpColorYellow200

#ffebb3

tpColorYellow300

#ffdd80

tpColorYellow

#febe14

tpColorYellow500

#a77005

tpColorYellow600

#714601

tpColorRed100

#ffeff0

tpColorRed200

#ffd9d9

tpColorRed300

#ffb0b0

tpColorRed

#ff5a5f

tpColorRed500

#b22d31

tpColorRed600

#7d0d10

tpColorBlack300

#676d73

tpColorBlack

#2f3033

tpColorGray200

#fafafa

tpColorGray300

#e9eced

tpColorGray

#d3d4d5

tpColorWhite

#ffffff

Corner Radius

Token Name Value

deprecated`tpCornerRadiusBase`	`4px`
deprecated`tpCornerRadiusBig`	`6px`
`tpCornerRadiusXSmall`	`4px`
`tpCornerRadiusSmall`	`6px`
`tpCornerRadiusMedium`	`8px`
`tpCornerRadiusLarge`	`12px`
`tpCornerRadiusXLarge`	`16px`
`tpCornerRadiusXXLarge`	`24px`
`tpCornerRadiusFull`	`50%`
`tpCornerRadiusSides`	`9999px`

Duration

Token Name Value

`tpDuration1`	`75`
`tpDuration2`	`150`
`tpDuration3`	`200`
`tpDuration4`	`250`
`tpDuration5`	`300`
`tpDuration6`	`350`

Easing

Token Name Value

`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 Name Value

`tpFontFamilyBase`	`Rise, Avenir, Helvetica, Arial, sans-serif`
`tpFontFamilyMonospace`	`'Source Code Pro', monospace`

Font Weight

Token Name Value

`tpFontWeightNormal`	`400`
`tpFontWeightBold`	`700`

Font

Token Name Value

`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 Name Value

`tpLetterSpacingLoose`	`1px`
`tpLetterSpacingTight`	`-1px`
`tpLetterSpacingExtraTight`	`-2px`

Line Height

Token Name Value

`tpLineHeightFlat`	`1.0`
`tpLineHeightTight`	`1.4`
`tpLineHeightBase`	`1.6`
`tpLineHeightLoose`	`1.9`

Shadow

Token Name Value

`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)`
deprecated`tpShadowCard`	`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 Name Value

tpScrimLight80

rgba(255, 255, 255, 0.8)

tpScrimDark80

rgba(0, 0, 0, 0.8)

Space

Token Name Value

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

Wrap

Token Name Value

`tpWrapMaxWidth`	`946px`
`tpWrapNoPadWidth`	`1010px`

Z-Index

Values to help stack Thumbprint UI components.

Token Name Value

tpZIndexModal 200