Adding your tokens to Contrast will enhance the inspect panel. Instead of showing saved styles or raw css values, it will display your token.

To add your tokens to Contrast follow these steps:

  1. Visit the Components tab in your Contrast team dashboard.
  2. Select a Token type (Colors, Spacings, Radii, Shadows, etc.)
  3. Click the "Add Tokens" button
  4. Paste the corresponding tokens from your theme file. Note, please make sure it is JSON format.
  5. If the preview of how your tokens are interpreted is as expected, click the "Add Tokens" button again and save these tokens.
  6. Repeat steps 2-5 with each Token type.

Still have a question? Email us at to let us know!