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.

Semantic tokens

Semantic tokens describe intent — what a color is for rather than what it looks like. Each token pairs a light and a dark value and switches automatically with the active theme.

Background

Token name Light Dark

$tp-background-alert-low

var(--tp-background-alert-low)

#fef2f2

#450a0a

$tp-background-alert-medium

var(--tp-background-alert-medium)

#dc2626

$tp-background-alert-medium-hover

var(--tp-background-alert-medium-hover)

#b91c1c

$tp-background-alert-medium-pressed

var(--tp-background-alert-medium-pressed)

#991b1b

$tp-background-alert-strong

var(--tp-background-alert-strong)

#450a0a

#fee2e2

$tp-background-neutral-default

var(--tp-background-neutral-default)

#ffffff

#1f2022

$tp-background-neutral-low

var(--tp-background-neutral-low)

#f5f6f6

#2b2d2f

$tp-background-neutral-low-hover

var(--tp-background-neutral-low-hover)

#f0faff

#07344A

$tp-background-neutral-low-pressed

var(--tp-background-neutral-low-pressed)

#e0f4fe

#0B516F

$tp-background-neutral-medium

var(--tp-background-neutral-medium)

#eeeff2

#383a3d

$tp-background-neutral-strong

var(--tp-background-neutral-strong)

#b9bbbf

#4c4e52

$tp-background-neutral-heavy

var(--tp-background-neutral-heavy)

#686c72

#b9bbbf

$tp-background-neutral-default-hover

var(--tp-background-neutral-default-hover)

#f0faff

#07344A

$tp-background-neutral-default-active

var(--tp-background-neutral-default-active)

#f0faff

#07344A

$tp-background-neutral-strong-active

var(--tp-background-neutral-strong-active)

#1f2022

#f5f6f6

$tp-background-neutral-default-pressed

var(--tp-background-neutral-default-pressed)

#e0f4fe

#0B516F

$tp-background-disabled-low

var(--tp-background-disabled-low)

#f5f6f6

#2b2d2f

$tp-background-disabled-medium

var(--tp-background-disabled-medium)

#dddee1

#383a3d

$tp-background-caution-low

var(--tp-background-caution-low)

#ffffff

#1f2022

$tp-background-caution-low-hover

var(--tp-background-caution-low-hover)

#fef2f2

#450a0a

$tp-background-caution-low-pressed

var(--tp-background-caution-low-pressed)

#fee2e2

#7f1d1d

$tp-background-neutral-inverse

var(--tp-background-neutral-inverse)

#1f2022

#ffffff

$tp-background-neutral-inverse-hover

var(--tp-background-neutral-inverse-hover)

#383a3d

#eeeff2

$tp-background-brand-low

var(--tp-background-brand-low)

#e0f4fe

#07344A

$tp-background-brand-low-hover

var(--tp-background-brand-low-hover)

#b9ebfe

#0B516F

$tp-background-brand-medium

var(--tp-background-brand-medium)

#0175A3

#7cdcfd

$tp-background-brand-medium-active

var(--tp-background-brand-medium-active)

#009fd9

$tp-background-brand-strong

var(--tp-background-brand-strong)

#07344A

#36ccfa

$tp-background-brand-strong-hover

var(--tp-background-brand-strong-hover)

#1f2022

#0cb6eb

$tp-background-brand-strong-pressed

var(--tp-background-brand-strong-pressed)

#07344A

#009fd9

$tp-background-info-low

var(--tp-background-info-low)

#e1edfe

#1d2249

$tp-background-info-medium

var(--tp-background-info-medium)

#3d4ac5

#a8c3f9

$tp-background-info-strong

var(--tp-background-info-strong)

#1d2249

#e1edfe

$tp-background-success-low

var(--tp-background-success-low)

#d6f5e3

#07271d

$tp-background-success-medium

var(--tp-background-success-medium)

#126a4b

#7cd9ae

$tp-background-success-strong

var(--tp-background-success-strong)

#07271d

#d6f5e3

$tp-background-warning-low

var(--tp-background-warning-low)

#fefce8

#422006

$tp-background-warning-medium

var(--tp-background-warning-medium)

#ca8a04

#fde047

$tp-background-warning-strong

var(--tp-background-warning-strong)

#422006

#fef9c3

$tp-background-ratings-default

var(--tp-background-ratings-default)

#ffffff

#1f2022

$tp-background-ratings-default-active

var(--tp-background-ratings-default-active)

#facc15

#eab308

Border

Token name Light Dark

$tp-border-neutral-default

var(--tp-border-neutral-default)

#dddee1

#383a3d

$tp-border-neutral-default-active

var(--tp-border-neutral-default-active)

#009fd9

$tp-border-neutral-default-pressed

var(--tp-border-neutral-default-pressed)

#dddee1

#4c4e52

$tp-border-neutral-low-active

var(--tp-border-neutral-low-active)

#1f2022

#f5f6f6

$tp-border-neutral-medium

var(--tp-border-neutral-medium)

#b9bbbf

#4c4e52

$tp-border-neutral-strong

var(--tp-border-neutral-strong)

#1f2022

#f5f6f6

$tp-border-neutral-inverse

var(--tp-border-neutral-inverse)

#ffffff

#383a3d

$tp-border-neutral-default-disabled

var(--tp-border-neutral-default-disabled)

#f5f6f6

#2b2d2f

$tp-border-neutral-medium-disabled

var(--tp-border-neutral-medium-disabled)

#dddee1

#383a3d

$tp-border-neutral-strong-active

var(--tp-border-neutral-strong-active)

#1f2022

#f5f6f6

$tp-border-ratings-default

var(--tp-border-ratings-default)

#a16207

#ca8a04

$tp-border-alert-default

var(--tp-border-alert-default)

#dc2626

#f87171

$tp-border-alert-default-pressed

var(--tp-border-alert-default-pressed)

#b91c1c

#dc2626

$tp-border-alert-strong-pressed

var(--tp-border-alert-strong-pressed)

#991b1b

#dc2626

$tp-border-disabled-default

var(--tp-border-disabled-default)

#f5f6f6

#2b2d2f

$tp-border-disabled-medium

var(--tp-border-disabled-medium)

#dddee1

#383a3d

Text

Token name Light Dark

$tp-text-neutral-default

var(--tp-text-neutral-default)

#1f2022

#f5f6f6

$tp-text-neutral-medium

var(--tp-text-neutral-medium)

#595c61

#b9bbbf

$tp-text-neutral-inverse

var(--tp-text-neutral-inverse)

#ffffff

#1f2022

$tp-text-on-brand-strong

var(--tp-text-on-brand-strong)

#7cdcfd

#1f2022

$tp-text-on-brand-default

var(--tp-text-on-brand-default)

#0175A3

#36ccfa

$tp-text-alert-medium

var(--tp-text-alert-medium)

#dc2626

#f87171

$tp-text-alert-strong

var(--tp-text-alert-strong)

#450a0a

#fee2e2

$tp-text-brand-medium

var(--tp-text-brand-medium)

#009fd9

#36ccfa

$tp-text-brand-strong

var(--tp-text-brand-strong)

#07344A

#e0f4fe

$tp-text-info-medium

var(--tp-text-info-medium)

#5968e2

#85a1f4

$tp-text-info-strong

var(--tp-text-info-strong)

#1d2249

#e1edfe

$tp-text-success-medium

var(--tp-text-success-medium)

#16855b

#47c08c

$tp-text-success-strong

var(--tp-text-success-strong)

#07271d

#d6f5e3

$tp-text-warning-medium

var(--tp-text-warning-medium)

#ca8a04

#facc15

$tp-text-warning-strong

var(--tp-text-warning-strong)

#422006

#fef9c3

$tp-text-disabled

var(--tp-text-disabled)

#b9bbbf

#4c4e52

Icon

Token name Light Dark

$tp-icon-neutral-default

var(--tp-icon-neutral-default)

#1f2022

#f5f6f6

$tp-icon-neutral-medium

var(--tp-icon-neutral-medium)

#595c61

#b9bbbf

$tp-icon-neutral-low

var(--tp-icon-neutral-low)

#83878d

#686c72

$tp-icon-neutral-inverse

var(--tp-icon-neutral-inverse)

#ffffff

#1f2022

$tp-icon-info-default

var(--tp-icon-info-default)

#5968e2

#85a1f4

$tp-icon-info-low

var(--tp-icon-info-low)

#85a1f4

#5968e2

$tp-icon-info-strong

var(--tp-icon-info-strong)

#1d2249

#eeeff2

$tp-icon-brand-default

var(--tp-icon-brand-default)

#009fd9

#36ccfa

$tp-icon-brand-low

var(--tp-icon-brand-low)

#36ccfa

#009fd9

$tp-icon-brand-strong

var(--tp-icon-brand-strong)

#07344A

#e0f4fe

$tp-icon-success-default

var(--tp-icon-success-default)

#16855b

#47c08c

$tp-icon-success-low

var(--tp-icon-success-low)

#47c08c

#16855b

$tp-icon-success-strong

var(--tp-icon-success-strong)

#07271d

#d6f5e3

$tp-icon-warning-default

var(--tp-icon-warning-default)

#ca8a04

#facc15

$tp-icon-warning-low

var(--tp-icon-warning-low)

#facc15

#ca8a04

$tp-icon-warning-strong

var(--tp-icon-warning-strong)

#422006

#fef9c3

$tp-icon-alert-default

var(--tp-icon-alert-default)

#dc2626

#f87171

$tp-icon-alert-low

var(--tp-icon-alert-low)

#f87171

#dc2626

$tp-icon-alert-strong

var(--tp-icon-alert-strong)

#450a0a

#fee2e2

$tp-icon-on-brand-strong

var(--tp-icon-on-brand-strong)

#7cdcfd

#1f2022

$tp-icon-disabled

var(--tp-icon-disabled)

#b9bbbf

#595c61

Data

Token name Light Dark

$tp-data-info-medium

var(--tp-data-info-medium)

#5968e2

#85a1f4

$tp-data-info-low

var(--tp-data-info-low)

#c9dbfc

#34409f

$tp-data-info-strong

var(--tp-data-info-strong)

#1d2249

#e1edfe

Heading

Token name Light Dark

$tp-heading-neutral-default

var(--tp-heading-neutral-default)

#1f2022

#f5f6f6

$tp-heading-neutral-medium

var(--tp-heading-neutral-medium)

#595c61

#b9bbbf

$tp-heading-neutral-low

var(--tp-heading-neutral-low)

#686c72

#b9bbbf

$tp-heading-neutral-inverse

var(--tp-heading-neutral-inverse)

#ffffff

#1f2022

Link

Token name Light Dark

$tp-link-brand-default

var(--tp-link-brand-default)

#0175A3

#36ccfa

$tp-link-neutral-default

var(--tp-link-neutral-default)

#1f2022

#f5f6f6

$tp-link-neutral-default-hover

var(--tp-link-neutral-default-hover)

#009fd9

#36ccfa

$tp-link-neutral-low

var(--tp-link-neutral-low)

#595c61

#b9bbbf

$tp-link-neutral-inverse

var(--tp-link-neutral-inverse)

#ffffff

#1f2022

$tp-link-alert-default

var(--tp-link-alert-default)

#dc2626

#f87171

$tp-link-on-brand-strong

var(--tp-link-on-brand-strong)

#7cdcfd

#07344A

Core tokens

Core tokens are the raw primitives — color scales, spacing, typography, and motion values — that semantic tokens reference. Reach for a semantic token first and use a core token when no semantic role fits.

Breakpoint

Token name	Value
`$tp-v2-breakpoint__smallValue`	`481`
`$tp-v2-breakpoint__small`	`481px`
`$tp-v2-breakpoint__largeValue`	`1025`
`$tp-v2-breakpoint__large`	`1025px`
`$tp-v2-breakpoint__mediumValue`	`700`
`$tp-v2-breakpoint__medium`	`700px`
`$tp-v2-breakpoint__splitViewMediumValue`	`1060`
`$tp-v2-breakpoint__splitViewMedium`	`1060px`
`$tp-v2-breakpoint__splitViewSmallValue`	`769`
`$tp-v2-breakpoint__splitViewSmall`	`769px`

Color

Token name Value

$tp-v2-color__system-white

#ffffff

$tp-v2-color__system-black

#000000

$tp-v2-color__gray-50

#f5f6f6

$tp-v2-color__gray-100

#eeeff2

$tp-v2-color__gray-200

#dddee1

$tp-v2-color__gray-300

#b9bbbf

$tp-v2-color__gray-400

#83878d

$tp-v2-color__gray-500

#686c72

$tp-v2-color__gray-600

#595c61

$tp-v2-color__gray-700

#4c4e52

$tp-v2-color__gray-800

#383a3d

$tp-v2-color__gray-900

#2b2d2f

$tp-v2-color__gray-950

#1f2022

$tp-v2-color__blue-50

#f0faff

$tp-v2-color__blue-100

#e0f4fe

$tp-v2-color__blue-200

#b9ebfe

$tp-v2-color__blue-300

#7cdcfd

$tp-v2-color__blue-400

#36ccfa

$tp-v2-color__blue-500

#0cb6eb

$tp-v2-color__blue-600

#009fd9

$tp-v2-color__blue-700

#0175A3

$tp-v2-color__blue-800

#066286

$tp-v2-color__blue-900

#0B516F

$tp-v2-color__blue-950

#07344A

$tp-v2-color__indigo-50

#eff4fe

$tp-v2-color__indigo-100

#e1edfe

$tp-v2-color__indigo-200

#c9dbfc

$tp-v2-color__indigo-300

#a8c3f9

$tp-v2-color__indigo-400

#85a1f4

$tp-v2-color__indigo-500

#6881ec

$tp-v2-color__indigo-600

#5968e2

$tp-v2-color__indigo-700

#3d4ac5

$tp-v2-color__indigo-800

#34409f

$tp-v2-color__indigo-900

#313b7e

$tp-v2-color__indigo-950

#1d2249

$tp-v2-color__purple-50

#f6f4fe

$tp-v2-color__purple-100

#efebfc

$tp-v2-color__purple-200

#dfdbf9

$tp-v2-color__purple-300

#c8bdf5

$tp-v2-color__purple-400

#ab98ed

$tp-v2-color__purple-500

#906ee4

$tp-v2-color__purple-600

#7f4fd8

$tp-v2-color__purple-700

#6637b6

$tp-v2-color__purple-800

#5d32a5

$tp-v2-color__purple-900

#4d2b87

$tp-v2-color__purple-950

#301a5b

$tp-v2-color__green-50

#eefbf4

$tp-v2-color__green-100

#d6f5e3

$tp-v2-color__green-200

#b0eacb

$tp-v2-color__green-300

#7cd9ae

$tp-v2-color__green-400

#47c08c

$tp-v2-color__green-500

#24a571

$tp-v2-color__green-600

#16855b

$tp-v2-color__green-700

#126a4b

$tp-v2-color__green-800

#10553c

$tp-v2-color__green-900

#0e4633

$tp-v2-color__green-950

#07271d

$tp-v2-color__red-50

#fef2f2

$tp-v2-color__red-100

#fee2e2

$tp-v2-color__red-200

#fecaca

$tp-v2-color__red-300

#fca5a5

$tp-v2-color__red-400

#f87171

$tp-v2-color__red-500

#ef4444

$tp-v2-color__red-600

#dc2626

$tp-v2-color__red-700

#b91c1c

$tp-v2-color__red-800

#991b1b

$tp-v2-color__red-900

#7f1d1d

$tp-v2-color__red-950

#450a0a

$tp-v2-color__yellow-50

#fefce8

$tp-v2-color__yellow-100

#fef9c3

$tp-v2-color__yellow-200

#fef08a

$tp-v2-color__yellow-300

#fde047

$tp-v2-color__yellow-400

#facc15

$tp-v2-color__yellow-500

#eab308

$tp-v2-color__yellow-600

#ca8a04

$tp-v2-color__yellow-700

#a16207

$tp-v2-color__yellow-800

#854d0e

$tp-v2-color__yellow-900

#713f12

$tp-v2-color__yellow-950

#422006

Corner radius

Token name	Value
`$tp-v2-corner-radius__none`	`0`
`$tp-v2-corner-radius__xsmall`	`4px`
`$tp-v2-corner-radius__small`	`6px`
`$tp-v2-corner-radius__medium`	`8px`
`$tp-v2-corner-radius__large`	`12px`
`$tp-v2-corner-radius__xlarge`	`16px`
`$tp-v2-corner-radius__xxlarge`	`24px`
`$tp-v2-corner-radius__sides`	`9999px`

Duration

Token name	Value
`$tp-v2-duration__xxsmall`	`75ms`
`$tp-v2-duration__xsmall`	`150ms`
`$tp-v2-duration__small`	`200ms`
`$tp-v2-duration__medium`	`250ms`
`$tp-v2-duration__large`	`300ms`
`$tp-v2-duration__xlarge`	`350ms`

Easing

Token name	Value
`$tp-v2-easing__in`	`cubic-bezier(0.50, 0, 1, 1)`
`$tp-v2-easing__out`	`cubic-bezier(0, 0, 0.40, 1)`
`$tp-v2-easing__in-out`	`cubic-bezier(0.45, 0, 0.40, 1)`

Font

Token name	Value
`$tp-v2-font__title-0__Size`	`48px`
`$tp-v2-font__title-0__ResponsiveSize`	`64px`
`$tp-v2-font__title-0__LineHeight`	`105%`
`$tp-v2-font__title-0__LetterSpacing`	`-2%`
`$tp-v2-font__title-0__Weight`	`563`
`$tp-v2-font__title-1__Size`	`36px`
`$tp-v2-font__title-1__ResponsiveSize`	`48px`
`$tp-v2-font__title-1__LineHeight`	`105%`
`$tp-v2-font__title-1__LetterSpacing`	`-2%`
`$tp-v2-font__title-1__Weight`	`563`
`$tp-v2-font__title-2__Size`	`28px`
`$tp-v2-font__title-2__ResponsiveSize`	`36px`
`$tp-v2-font__title-2__LineHeight`	`110%`
`$tp-v2-font__title-2__LetterSpacing`	`-1%`
`$tp-v2-font__title-2__Weight`	`563`
`$tp-v2-font__title-3__Size`	`22px`
`$tp-v2-font__title-3__ResponsiveSize`	`24px`
`$tp-v2-font__title-3__LetterSpacing`	`-1%`
`$tp-v2-font__title-3__LineHeight`	`110%`
`$tp-v2-font__title-3__Weight`	`590`
`$tp-v2-font__title-4__Size`	`20px`
`$tp-v2-font__title-4__LineHeight`	`120%`
`$tp-v2-font__title-4__LetterSpacing`	`0%`
`$tp-v2-font__title-4__Weight`	`660`
`$tp-v2-font__title-5__Size`	`18px`
`$tp-v2-font__title-5__LineHeight`	`120%`
`$tp-v2-font__title-5__LetterSpacing`	`0%`
`$tp-v2-font__title-5__Weight`	`660`
`$tp-v2-font__title-6__Size`	`16px`
`$tp-v2-font__title-6__LineHeight`	`120%`
`$tp-v2-font__title-6__LetterSpacing`	`0%`
`$tp-v2-font__title-6__Weight`	`660`
`$tp-v2-font__title-7__Size`	`14px`
`$tp-v2-font__title-7__LineHeight`	`120%`
`$tp-v2-font__title-7__LetterSpacing`	`0%`
`$tp-v2-font__title-7__Weight`	`660`
`$tp-v2-font__title-8__Size`	`12px`
`$tp-v2-font__title-8__LineHeight`	`120%`
`$tp-v2-font__title-8__LetterSpacing`	`0%`
`$tp-v2-font__title-8__Weight`	`660`
`$tp-v2-font__text-1__Size`	`16px`
`$tp-v2-font__text-1__LineHeight`	`140%`
`$tp-v2-font__text-1__LetterSpacing`	`0%`
`$tp-v2-font__text-1__Weight`	`400`
`$tp-v2-font__text-2__Size`	`14px`
`$tp-v2-font__text-2__LineHeight`	`140%`
`$tp-v2-font__text-2__LetterSpacing`	`0%`
`$tp-v2-font__text-2__Weight`	`400`
`$tp-v2-font__text-3__Size`	`12px`
`$tp-v2-font__text-3__LineHeight`	`140%`
`$tp-v2-font__text-3__LetterSpacing`	`0%`
`$tp-v2-font__text-3__Weight`	`400`
`$tp-v2-font__text-4__Size`	`10px`
`$tp-v2-font__text-4__LineHeight`	`140%`
`$tp-v2-font__text-4__LetterSpacing`	`0%`
`$tp-v2-font__text-4__Weight`	`400`
`$tp-v2-font__letterSpacing-medium`	`0`
`$tp-v2-font__letterSpacing-large`	`1%`
`$tp-v2-font__letterSpacing-small`	`-1%`
`$tp-v2-font__letterSpacing-xsmall`	`-2%`
`$tp-v2-font__lineHeight-medium`	`140%`
`$tp-v2-font__lineHeight-large`	`160%`
`$tp-v2-font__lineHeight-small`	`110%`
`$tp-v2-font__lineHeight-xsmall`	`105%`
`$tp-v2-font__lineHeight-xxsmall`	`100%`
`$tp-v2-font__weight-regular`	`400`
`$tp-v2-font__weight-medium-regular`	`563`
`$tp-v2-font__weight-medium`	`590`
`$tp-v2-font__weight-medium-bold`	`660`
`$tp-v2-font__weight-bold`	`700`
`$tp-v2-font__weight-heavy`	`800`

Scrim

Token name Value

$tp-v2-scrim__dark-80

rgba(0, 0, 0, 0.8)

$tp-v2-scrim__light-80

rgba(255, 255, 255, 0.8)

Shadow

Token name	Value
`$tp-v2-shadow__100`	`0px 1px 3px rgba(0, 0, 0, 0.1)`
`$tp-v2-shadow__200`	`0px 2px 4px rgba(0, 0, 0, 0.15)`
`$tp-v2-shadow__300`	`0px 2px 7px rgba(0, 0, 0, 0.15)`
`$tp-v2-shadow__400`	`0px 2px 10px rgba(0, 0, 0, 0.2)`

Space

Token name	Value
`$tp-v2-space__xxsmall`	`4px`
`$tp-v2-space__xsmall`	`8px`
`$tp-v2-space__small`	`12px`
`$tp-v2-space__medium`	`16px`
`$tp-v2-space__large`	`20px`
`$tp-v2-space__xlarge`	`24px`
`$tp-v2-space__xxlarge`	`32px`
`$tp-v2-space__3xlarge`	`48px`
`$tp-v2-space__4xlarge`	`64px`
`$tp-v2-space__5xlarge`	`96px`
`$tp-v2-space__6xlarge`	`128px`
`$tp-v2-space__7xlarge`	`256px`

Z-index

Token name	Value
`$tp-v2-z-index__modal`	`200`