UI DocsDesign tokens
Core design elements used across the entire system.
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. - [Salesforce]
Colors:
| Tokens | Example | Released | Themeable | Support |
|---|---|---|---|---|
| $red | #DB2828 | 1.0.0 | Yes | |
| $orange | #F2711C | 1.0.0 | Yes | |
| $yellow | #FBBD08 | 1.0.0 | Yes | |
| $olive | #B5CC18 | 1.0.0 | Yes | |
| $green | rgb(60, 213, 46) | 1.0.0 | Yes | |
| $teal | #00B5AD | 1.0.0 | Yes | |
| $blue | #2185D0 | 1.0.0 | Yes | |
| $violet | #6435C9 | 1.0.0 | Yes | |
| $purple | #A333C8 | 1.0.0 | Yes | |
| $pink | #E03997 | 1.0.0 | Yes | |
| $brown | #A5673F | 1.0.0 | Yes | |
| $grey | #767676 | 1.0.0 | Yes | |
| $black | #1B1C1D | 1.0.0 | Yes |