Token List

Design tokens are tiny pieces of UI information that are used to ensure brand consistency and product design-engineer collaboration across all properties.

Switch Theme

Breakpoints

Match takes a mobile-first approach to responsive web design. These breakpoints provide ranges needed to ensure that your UI communicates valuable information for customers of all screen sizes.

TokenValue
mediaQueries.smallCopyscreen and (min-width: 360px)Copy
mediaQueries.mediumCopyscreen and (min-width: 768px)Copy
mediaQueries.largeCopyscreen and (min-width: 1024px)Copy
mediaQueries.xLargeCopyscreen and (min-width: 1200px)Copy
mediaQueries.xxLargeCopyscreen and (min-width: 1440px)Copy

Colors

Primary

This palette defines our brand. Emphasize Twilio Red and avoid introducing too many secondary colors for audiences new to Twilio.

TokenValueExample
colors.brandCopy#001489Copy
colors.brandHighlightCopy#F22F46Copy
colors.whiteCopy#FFFFFFCopy

Secondary

We use these colors to help guide attention through a layout or illustration.

TokenValueExample
colors.baseBlueCopy#008CFFCopy
colors.baseGreenCopy#36D576Copy
colors.baseOrangeCopy#F47C22Copy
colors.baseYellowCopy#FFDD35Copy
colors.basePurpleCopy#8C5BD8Copy

Tertiary

We use these colors to help guide attention through a layout or illustration.

TokenValueExample
colors.gray10Copy#F4F4F6Copy
colors.gray20Copy#E1E3EACopy
colors.gray30Copy#CACDD8Copy
colors.gray40Copy#AEB2C1Copy
colors.gray50Copy#8891AACopy
colors.gray60Copy#606B85Copy
colors.gray70Copy#4B5671Copy
colors.gray80Copy#394762Copy
colors.gray90Copy#1F304CCopy
colors.gray100Copy#121C2DCopy
colors.red10Copy#FEECECCopy
colors.red20Copy#FCCFCFCopy
colors.red30Copy#F6B1B1Copy
colors.red40Copy#F58A8ACopy
colors.red50Copy#EB5656Copy
colors.red60Copy#D61F1FCopy
colors.red70Copy#AD1111Copy
colors.red80Copy#750C0CCopy
colors.red90Copy#4A0B0BCopy
colors.red100Copy#310C0CCopy
colors.orange10Copy#FEF5EECopy
colors.orange20Copy#FDDCC4Copy
colors.orange30Copy#FAC2A0Copy
colors.orange40Copy#FFB37ACopy
colors.orange50Copy#FA9950Copy
colors.orange60Copy#F47C22Copy
colors.orange70Copy#C35323Copy
colors.orange80Copy#8D3118Copy
colors.orange90Copy#541914Copy
colors.orange100Copy#40130FCopy
colors.yellow10Copy#FFFBEACopy
colors.yellow20Copy#FFF1B3Copy
colors.yellow30Copy#FFE980Copy
colors.yellow40Copy#FFDD35Copy
colors.yellow50Copy#FAD100Copy
colors.yellow60Copy#E8B407Copy
colors.yellow70Copy#C28E00Copy
colors.yellow80Copy#855C15Copy
colors.yellow90Copy#543308Copy
colors.yellow100Copy#3D2106Copy
colors.green10Copy#EDFDF3Copy
colors.green20Copy#D1FAE0Copy
colors.green30Copy#A2F6C3Copy
colors.green40Copy#7BEAA5Copy
colors.green50Copy#36D576Copy
colors.green60Copy#14B053Copy
colors.green70Copy#0E7C3ACopy
colors.green80Copy#0B602DCopy
colors.green90Copy#0D3A1FCopy
colors.green100Copy#052912Copy
colors.blue10Copy#EBF4FFCopy
colors.blue20Copy#CCE4FFCopy
colors.blue30Copy#99CDFFCopy
colors.blue40Copy#66B3FFCopy
colors.blue50Copy#008CFFCopy
colors.blue60Copy#0263E0Copy
colors.blue70Copy#043CB5Copy
colors.blue80Copy#001489Copy
colors.blue90Copy#030B5DCopy
colors.blue100Copy#06033ACopy
colors.purple10Copy#F5F0FCCopy
colors.purple20Copy#E7DCFACopy
colors.purple30Copy#C8AFF0Copy
colors.purple40Copy#A67FE3Copy
colors.purple50Copy#8C5BD8Copy
colors.purple60Copy#6D2ED1Copy
colors.purple70Copy#5817BDCopy
colors.purple80Copy#380E78Copy
colors.purple90Copy#22094ACopy
colors.purple100Copy#160433Copy

Background Colors

TokenValueExample
backgroundColors.whiteCopy#FFFFFFCopy
backgroundColors.blueCopy#001489Copy
backgroundColors.lightCopy#F4F4F6Copy
backgroundColors.darkestCopy#06033ACopy

Gradients

TokenValueExample
gradients.redHeroCopy180deg, rgba(242, 47, 70, 0) 0%, rgba(242, 47, 70, 0.07) 100%Copy
gradients.blueHeroCopy180deg, rgba(0, 140, 255, 0) 0%, rgba(0, 140, 255, 0.07) 100%Copy
gradients.red180Copy180deg, rgba(242, 47, 70, 0.07) 0%, rgba(242, 47, 70, 0) 100%Copy
gradients.orange180Copy180deg, rgba(244, 124, 34, 0.07) 0%, rgba(244, 124, 34, 0) 100%Copy
gradients.green180Copy180deg, rgba(54, 213, 118, 0.07) 0%, rgba(54, 213, 118, 0) 100%Copy
gradients.blue180Copy180deg, rgba(2, 99, 224, 0.07) 0%, rgba(2, 99, 224, 0) 100%Copy
gradients.purple180Copy180deg, rgba(140, 91, 216, 0.07) 0%, rgba(140, 91, 216, 0) 100%Copy
gradients.darkGrayCopyto bottom right, rgba(31, 48, 76, 0.2) 0%, rgba(31, 48, 76, 0.7) 100%Copy
gradients.lightRedBlueCopyto bottom right, rgba(214, 31, 31, 0.5) 0%, rgba(2, 99, 224, 0.5) 100%Copy
gradients.redBlueCopyto bottom right, rgba(214, 31, 31, 0.7) 0%, rgba(2, 99, 224, 0.7) 100%Copy

Text Colors

TokenValueExample
textColors.primaryCopy#1F304CCopy
AAA
AAA
textColors.secondaryCopy#4B5671Copy
AAA
AA
textColors.tertiaryCopy#606B85Copy
AA
AA
textColors.inversePrimaryCopy#FFFFFFCopy
AAA
AAA

Font Families

TokenValueExample
fontFamilies.textCopyWhitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serifCopyA group of kangaroos is called a mob
fontFamilies.headingCopyWhitney SSm A, Whitney SSm B, Helvetica Neue, Helvetica, Arial, sans-serifCopyA group of kangaroos is called a mob
fontFamilies.heroCopyWhitney Cond SSm A, Whitney Cond SSm B, sans-serifCopyA group of kangaroos is called a mob
fontFamilies.quoteCopySurveyor SSm A, Surveyor SSm BCopyA group of kangaroos is called a mob
fontFamilies.codeCopyFira Mono, Consolas, monospaceCopyA group of kangaroos is called a mob

Font Sizes

TokenValueExample
fontSizes.scale60Copy12px
0.75rem
Copy
Aa
fontSizes.scale70Copy13px
0.813rem
Copy
Aa
fontSizes.scale80Copy14px
0.875rem
Copy
Aa
fontSizes.scale100Copy16px
1rem
Copy
Aa
fontSizes.scale120Copy18px
1.125rem
Copy
Aa
fontSizes.scale140Copy20px
1.25rem
Copy
Aa
fontSizes.scale160Copy22px
1.375rem
Copy
Aa
fontSizes.scale180Copy24px
1.5rem
Copy
Aa
fontSizes.scale220Copy28px
1.75rem
Copy
Aa
fontSizes.scale280Copy34px
2.125rem
Copy
Aa
fontSizes.scale340Copy40px
2.5rem
Copy
Aa
fontSizes.scale420Copy48px
3rem
Copy
Aa
fontSizes.scale440Copy50px
3.125rem
Copy
Aa
fontSizes.scale500Copy56px
3.5rem
Copy
Aa
fontSizes.scale1020Copy108px
6.75rem
Copy
Aa

Font Weights

TokenValueExample
fontWeights.thinCopy200CopyAa
fontWeights.lightCopy300CopyAa
fontWeights.regularCopy400CopyAa
fontWeights.mediumCopy500CopyAa
fontWeights.semiboldCopy600CopyAa
fontWeights.boldCopy700CopyAa

Line Heights

TokenValue
lineHeights.scale100Copy1Copy
lineHeights.scale125Copy1.125Copy
lineHeights.scale140Copy1.25Copy
lineHeights.scale160Copy1.4Copy
lineHeights.scale180Copy1.5Copy
lineHeights.scale200Copy1.6Copy
lineHeights.scale220Copy1.75Copy

Shadows

TokenValueExample
shadows.cardCopy0rem 0.5rem 1.5rem rgba(18, 28, 45, 0.1)Copy
shadows.navigationCopy0rem 0.875rem 1.563rem rgba(18, 28, 45, 0.12)Copy
shadows.imageCopy0rem 0.25rem 1rem rgba(18, 28, 45, 0.15)Copy
shadows.largeCopy0rem 1rem 3.75rem rgba(18, 28, 45, 0.15)Copy
shadows.inverseCopy0rem 0.5rem 1.5rem rgba(18, 28, 45, 0.1)Copy

Borders

TokenValueExample
borderColors.cardCopy#E1E3EACopy
borderColors.buttonPrimaryCopy#0263E0Copy
borderColors.focusPrimaryCopy#0263E0Copy
borderColors.errorCopy#D61F1FCopy
borderColors.lightCopy#EBF4FFCopy
borderColors.mediumCopy#AEB2C1Copy
borderColors.darkestCopy#06033ACopy

Border Widths

TokenValueExample
borderWidths.thinCopy1px
0.063rem
Copy
borderWidths.lightCopy2px
0.125rem
Copy
borderWidths.mediumCopy4px
0.25rem
Copy
borderWidths.heavyCopy20px
1.25rem
Copy

Border Radii

TokenValueExample
radii.smallCopy2px
0.125rem
Copy
radii.mediumCopy3px
0.188rem
Copy
radii.baseCopy4px
0.25rem
Copy
radii.largeCopy5px
0.313rem
Copy
radii.squircleCopy20px
1.25rem
Copy

Spacing

TokenValueExample
space.scale0Copy0px
0rem
Copy
space.scale7Copy4px
0.25rem
Copy
space.scale20Copy8px
0.5rem
Copy
space.scale40Copy10px
0.625rem
Copy
space.scale60Copy12px
0.75rem
Copy
space.scale100Copy16px
1rem
Copy
space.scale140Copy20px
1.25rem
Copy
space.scale180Copy24px
1.5rem
Copy
space.scale260Copy32px
2rem
Copy
space.scale300Copy36px
2.25rem
Copy
space.scale340Copy40px
2.5rem
Copy
space.scale420Copy48px
3rem
Copy
space.scale500Copy56px
3.5rem
Copy
space.scale540Copy60px
3.75rem
Copy
space.scale660Copy72px
4.5rem
Copy
space.scale740Copy80px
5rem
Copy
space.scale1140Copy120px
7.5rem
Copy

Icon Sizes

TokenValueExample
iconSizes.smallCopy10px
0.625rem
Copy
iconSizes.mediumCopy12px
0.75rem
Copy
iconSizes.baseCopy16px
1rem
Copy
iconSizes.largeCopy24px
1.5rem
Copy
iconSizes.xLargeCopy32px
2rem
Copy