Tokens

Semantic and core design tokens for the next generation of Thumbtack’s UI.

Version

Need v1 tokens?

The previous generation of tokens is still available. See the Tokens v1 documentation.

Core tokens

Core tokens are the raw primitives — color scales, spacing, typography, and motion values — that power Thumbtack’s UI.

Breakpoint

Token name	Value
`tpV2BreakpointSmallValue`	`481`
`tpV2BreakpointSmall`	`481px`
`tpV2BreakpointLargeValue`	`1025`
`tpV2BreakpointLarge`	`1025px`
`tpV2BreakpointMediumValue`	`700`
`tpV2BreakpointMedium`	`700px`
`tpV2BreakpointSplitViewMediumValue`	`1060`
`tpV2BreakpointSplitViewMedium`	`1060px`
`tpV2BreakpointSplitViewSmallValue`	`769`
`tpV2BreakpointSplitViewSmall`	`769px`

Color

Token name Value

tpV2ColorSystemWhite

#ffffff

tpV2ColorSystemBlack

#000000

tpV2ColorGray50

#f5f6f6

tpV2ColorGray100

#eeeff2

tpV2ColorGray200

#dddee1

tpV2ColorGray300

#b9bbbf

tpV2ColorGray400

#83878d

tpV2ColorGray500

#686c72

tpV2ColorGray600

#595c61

tpV2ColorGray700

#4c4e52

tpV2ColorGray800

#383a3d

tpV2ColorGray900

#2b2d2f

tpV2ColorGray950

#1f2022

tpV2ColorBlue50

#f0faff

tpV2ColorBlue100

#e0f4fe

tpV2ColorBlue200

#b9ebfe

tpV2ColorBlue300

#7cdcfd

tpV2ColorBlue400

#36ccfa

tpV2ColorBlue500

#0cb6eb

tpV2ColorBlue600

#009fd9

tpV2ColorBlue700

#0175A3

tpV2ColorBlue800

#066286

tpV2ColorBlue900

#0B516F

tpV2ColorBlue950

#07344A

tpV2ColorIndigo50

#eff4fe

tpV2ColorIndigo100

#e1edfe

tpV2ColorIndigo200

#c9dbfc

tpV2ColorIndigo300

#a8c3f9

tpV2ColorIndigo400

#85a1f4

tpV2ColorIndigo500

#6881ec

tpV2ColorIndigo600

#5968e2

tpV2ColorIndigo700

#3d4ac5

tpV2ColorIndigo800

#34409f

tpV2ColorIndigo900

#313b7e

tpV2ColorIndigo950

#1d2249

tpV2ColorPurple50

#f6f4fe

tpV2ColorPurple100

#efebfc

tpV2ColorPurple200

#dfdbf9

tpV2ColorPurple300

#c8bdf5

tpV2ColorPurple400

#ab98ed

tpV2ColorPurple500

#906ee4

tpV2ColorPurple600

#7f4fd8

tpV2ColorPurple700

#6637b6

tpV2ColorPurple800

#5d32a5

tpV2ColorPurple900

#4d2b87

tpV2ColorPurple950

#301a5b

tpV2ColorGreen50

#eefbf4

tpV2ColorGreen100

#d6f5e3

tpV2ColorGreen200

#b0eacb

tpV2ColorGreen300

#7cd9ae

tpV2ColorGreen400

#47c08c

tpV2ColorGreen500

#24a571

tpV2ColorGreen600

#16855b

tpV2ColorGreen700

#126a4b

tpV2ColorGreen800

#10553c

tpV2ColorGreen900

#0e4633

tpV2ColorGreen950

#07271d

tpV2ColorRed50

#fef2f2

tpV2ColorRed100

#fee2e2

tpV2ColorRed200

#fecaca

tpV2ColorRed300

#fca5a5

tpV2ColorRed400

#f87171

tpV2ColorRed500

#ef4444

tpV2ColorRed600

#dc2626

tpV2ColorRed700

#b91c1c

tpV2ColorRed800

#991b1b

tpV2ColorRed900

#7f1d1d

tpV2ColorRed950

#450a0a

tpV2ColorYellow50

#fefce8

tpV2ColorYellow100

#fef9c3

tpV2ColorYellow200

#fef08a

tpV2ColorYellow300

#fde047

tpV2ColorYellow400

#facc15

tpV2ColorYellow500

#eab308

tpV2ColorYellow600

#ca8a04

tpV2ColorYellow700

#a16207

tpV2ColorYellow800

#854d0e

tpV2ColorYellow900

#713f12

tpV2ColorYellow950

#422006

Corner radius

Token name	Value
`tpV2CornerRadiusNone`	`0`
`tpV2CornerRadiusXsmall`	`4`
`tpV2CornerRadiusSmall`	`6`
`tpV2CornerRadiusMedium`	`8`
`tpV2CornerRadiusLarge`	`12`
`tpV2CornerRadiusXlarge`	`16`
`tpV2CornerRadiusXxlarge`	`24`
`tpV2CornerRadiusSides`	`9999`

Duration

Token name	Value
`tpV2DurationXxsmall`	`75`
`tpV2DurationXsmall`	`150`
`tpV2DurationSmall`	`200`
`tpV2DurationMedium`	`250`
`tpV2DurationLarge`	`300`
`tpV2DurationXlarge`	`350`

Easing

Token name	Value
`tpV2EasingIn`	`cubic-bezier(0.50, 0, 1, 1)`
`tpV2EasingOut`	`cubic-bezier(0, 0, 0.40, 1)`
`tpV2EasingInOut`	`cubic-bezier(0.45, 0, 0.40, 1)`

Font

Token name	Value
`tpV2FontTitle0Size`	`48`
`tpV2FontTitle0ResponsiveSize`	`64`
`tpV2FontTitle0LineHeight`	`105%`
`tpV2FontTitle0LetterSpacing`	`-2%`
`tpV2FontTitle0Weight`	`563`
`tpV2FontTitle1Size`	`36`
`tpV2FontTitle1ResponsiveSize`	`48`
`tpV2FontTitle1LineHeight`	`105%`
`tpV2FontTitle1LetterSpacing`	`-2%`
`tpV2FontTitle1Weight`	`563`
`tpV2FontTitle2Size`	`28`
`tpV2FontTitle2ResponsiveSize`	`36`
`tpV2FontTitle2LineHeight`	`110%`
`tpV2FontTitle2LetterSpacing`	`-1%`
`tpV2FontTitle2Weight`	`563`
`tpV2FontTitle3Size`	`22`
`tpV2FontTitle3ResponsiveSize`	`24`
`tpV2FontTitle3LetterSpacing`	`-1%`
`tpV2FontTitle3LineHeight`	`110%`
`tpV2FontTitle3Weight`	`590`
`tpV2FontTitle4Size`	`20`
`tpV2FontTitle4LineHeight`	`120%`
`tpV2FontTitle4LetterSpacing`	`0%`
`tpV2FontTitle4Weight`	`660`
`tpV2FontTitle5Size`	`18`
`tpV2FontTitle5LineHeight`	`120%`
`tpV2FontTitle5LetterSpacing`	`0%`
`tpV2FontTitle5Weight`	`660`
`tpV2FontTitle6Size`	`16`
`tpV2FontTitle6LineHeight`	`120%`
`tpV2FontTitle6LetterSpacing`	`0%`
`tpV2FontTitle6Weight`	`660`
`tpV2FontTitle7Size`	`14`
`tpV2FontTitle7LineHeight`	`120%`
`tpV2FontTitle7LetterSpacing`	`0%`
`tpV2FontTitle7Weight`	`660`
`tpV2FontTitle8Size`	`12`
`tpV2FontTitle8LineHeight`	`120%`
`tpV2FontTitle8LetterSpacing`	`0%`
`tpV2FontTitle8Weight`	`660`
`tpV2FontText1Size`	`16`
`tpV2FontText1LineHeight`	`140%`
`tpV2FontText1LetterSpacing`	`0%`
`tpV2FontText1Weight`	`400`
`tpV2FontText2Size`	`14`
`tpV2FontText2LineHeight`	`140%`
`tpV2FontText2LetterSpacing`	`0%`
`tpV2FontText2Weight`	`400`
`tpV2FontText3Size`	`12`
`tpV2FontText3LineHeight`	`140%`
`tpV2FontText3LetterSpacing`	`0%`
`tpV2FontText3Weight`	`400`
`tpV2FontText4Size`	`10`
`tpV2FontText4LineHeight`	`140%`
`tpV2FontText4LetterSpacing`	`0%`
`tpV2FontText4Weight`	`400`
`tpV2FontLetterSpacingMedium`	`0`
`tpV2FontLetterSpacingLarge`	`1%`
`tpV2FontLetterSpacingSmall`	`-1%`
`tpV2FontLetterSpacingXsmall`	`-2%`
`tpV2FontLineHeightMedium`	`140%`
`tpV2FontLineHeightLarge`	`160%`
`tpV2FontLineHeightSmall`	`110%`
`tpV2FontLineHeightXsmall`	`105%`
`tpV2FontLineHeightXxsmall`	`100%`
`tpV2FontWeightRegular`	`400`
`tpV2FontWeightMediumRegular`	`563`
`tpV2FontWeightMedium`	`590`
`tpV2FontWeightMediumBold`	`660`
`tpV2FontWeightBold`	`700`
`tpV2FontWeightHeavy`	`800`

Scrim

Token name Value

tpV2ScrimDark80

rgba(0, 0, 0, 0.8)

tpV2ScrimLight80

rgba(255, 255, 255, 0.8)

Shadow

Token name	Value
`tpV2Shadow100`	`0px 1px 3px rgba(0, 0, 0, 0.1)`
`tpV2Shadow200`	`0px 2px 4px rgba(0, 0, 0, 0.15)`
`tpV2Shadow300`	`0px 2px 7px rgba(0, 0, 0, 0.15)`
`tpV2Shadow400`	`0px 2px 10px rgba(0, 0, 0, 0.2)`

Space

Token name	Value
`tpV2SpaceXxsmall`	`4`
`tpV2SpaceXsmall`	`8`
`tpV2SpaceSmall`	`12`
`tpV2SpaceMedium`	`16`
`tpV2SpaceLarge`	`20`
`tpV2SpaceXlarge`	`24`
`tpV2SpaceXxlarge`	`32`
`tpV2Space3xlarge`	`48`
`tpV2Space4xlarge`	`64`
`tpV2Space5xlarge`	`96`
`tpV2Space6xlarge`	`128`
`tpV2Space7xlarge`	`256`

Z-index

Token name	Value
`tpV2ZIndexModal`	`200`