Design tokens for colors other than grey

[charleneyjh1]

Hi team!

I wonder do we have design tokens for colors other than grey in code(like $color-red-60?) ? On the Paste site I only see design token for grey.

Thank you!

[SiTaggart]

Hi @charleneyjh1

As per the introduction to Design Tokens on the doc site, our tokens are named based on their use case.

For example $color-background-error is named to indicate the appropriate background color for an error, as opposed to $color-background-red which is less specific and could be used in a number of ways depending on cultural context and design language.
https://paste.twilio.design/tokens

We split colors into categories, border, backgrounds, text colors, shadows, etc. and those are the only colors available for you to use. (I'm not even 100% sure you can use the greys anymore 😨 )

This is how we scale and translate design language to implementation.

New design tokens are added to system after rigorous consideration as it is unlikely we'll ever be able to remove them once they are added, so it's a big deal.

We're always keen to hear about new design challenges you face using the system, if you think there are missing use cases then please let us know.