---
title: Tokens
slug: van-deer/Bj2g-tokens
docTags: 
createdAt: 2025-10-08T14:16:12.374Z
---



::::VerticalSplit{layout="right"}
:::VerticalSplitItem
# Tokens

Tokens act as a shared language between designers and engineers. Available as variables in both Figma and code libraries, they replace hard-coded values with a single source of truth—ensuring consistency, simplifying updates, and making collaboration more efficient.
:::

:::VerticalSplitItem

:::
::::



| Name                                                     | Value                      |
| -------------------------------------------------------- | -------------------------- |
| `vandeer-color-background`                               | `rgba(0, 0, 0, 1)`         |
| `vandeer-color-background-inverse`                       | `rgba(255, 255, 255, 1)`   |
| `vandeer-color-text-neutral-prominent`                   | `rgba(255, 255, 255, 1)`   |
| `vandeer-color-text-neutral-subtle`                      | `rgba(255, 255, 255, 0.7)` |
| `vandeer-color-text-neutral-disabled`                    | `rgba(102, 102, 102, 1)`   |
| `vandeer-color-text-negative`                            | `rgba(241, 76, 102, 1)`    |
| `vandeer-color-text-negative-inverse`                    | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-text-neutral-inverse-prominent`           | `rgba(0, 0, 0, 1)`         |
| `vandeer-color-text-neutral-inverse-subtle`              | `rgba(0, 0, 0, 0.7)`       |
| `vandeer-color-text-neutral-inverse-disabled`            | `rgba(153, 153, 153, 1)`   |
| `vandeer-color-icon-negative`                            | `rgba(241, 76, 102, 1)`    |
| `vandeer-color-icon-negative-inverse`                    | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-icon-neutral-prominent`                   | `rgba(255, 255, 255, 1)`   |
| `vandeer-color-icon-neutral-subtle`                      | `rgba(255, 255, 255, 0.7)` |
| `vandeer-color-icon-neutral-disabled`                    | `rgba(102, 102, 102, 1)`   |
| `vandeer-color-icon-neutral-inverse-prominent`           | `rgba(0, 0, 0, 1)`         |
| `vandeer-color-icon-neutral-inverse-subtle`              | `rgba(0, 0, 0, 0.7)`       |
| `vandeer-color-icon-neutral-inverse-disabled`            | `rgba(153, 153, 153, 1)`   |
| `vandeer-color-border-negative`                          | `rgba(241, 76, 102, 1)`    |
| `vandeer-color-border-negative-inverse`                  | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-border-neutral-prominent`                 | `rgba(255, 255, 255, 1)`   |
| `vandeer-color-border-neutral-subtle`                    | `rgba(255, 255, 255, 0.5)` |
| `vandeer-color-border-neutral-muted`                     | `rgba(255, 255, 255, 0.1)` |
| `vandeer-color-border-neutral-disabled`                  | `rgba(77, 77, 77, 1)`      |
| `vandeer-color-border-neutral-inverse-prominent`         | `rgba(0, 0, 0, 1)`         |
| `vandeer-color-border-neutral-inverse-subtle`            | `rgba(0, 0, 0, 0.5)`       |
| `vandeer-color-border-neutral-inverse-muted`             | `rgba(0, 0, 0, 0.1)`       |
| `vandeer-color-border-neutral-inverse-disabled`          | `rgba(229, 229, 229, 1)`   |
| `vandeer-color-border-brand-primary-prominent`           | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-border-brand-primary-subtle`              | `rgba(151, 12, 35, 1)`     |
| `vandeer-color-border-brand-primary-muted`               | `rgba(104, 8, 24, 1)`      |
| `vandeer-color-border-brand-secondary-prominent`         | `rgba(98, 105, 81, 1)`     |
| `vandeer-color-border-brand-secondary-subtle`            | `rgba(70, 75, 58, 1)`      |
| `vandeer-color-border-brand-secondary-muted`             | `rgba(43, 46, 36, 1)`      |
| `vandeer-color-border-brand-inverse-primary-prominent`   | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-border-brand-inverse-primary-subtle`      | `rgba(237, 28, 62, 1)`     |
| `vandeer-color-border-brand-inverse-primary-muted`       | `rgba(241, 76, 102, 1)`    |
| `vandeer-color-border-brand-inverse-secondary-prominent` | `rgba(98, 105, 81, 1)`     |
| `vandeer-color-border-brand-inverse-secondary-subtle`    | `rgba(124, 132, 102, 1)`   |
| `vandeer-color-border-brand-inverse-secondary-muted`     | `rgba(149, 157, 128, 1)`   |
| `vandeer-color-fill-neutral-prominent`                   | `rgba(255, 255, 255, 1)`   |
| `vandeer-color-fill-neutral-subtle`                      | `rgba(255, 255, 255, 0.1)` |
| `vandeer-color-fill-neutral-disabled`                    | `rgba(77, 77, 77, 1)`      |
| `vandeer-color-fill-neutral-inverse-prominent`           | `rgba(0, 0, 0, 1)`         |
| `vandeer-color-fill-neutral-inverse-subtle`              | `rgba(0, 0, 0, 0.1)`       |
| `vandeer-color-fill-neutral-inverse-disabled`            | `rgba(229, 229, 229, 1)`   |
| `vandeer-color-fill-brand-primary-default`               | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-fill-brand-primary-hover`                 | `rgba(151, 12, 35, 1)`     |
| `vandeer-color-fill-brand-primary-inverse-default`       | `rgba(200, 16, 46, 1)`     |
| `vandeer-color-fill-brand-primary-inverse-hover`         | `rgba(237, 28, 62, 1)`     |
| `vandeer-color-fill-brand-secondary-default`             | `rgba(98, 105, 81, 1)`     |
| `vandeer-color-fill-brand-secondary-hover`               | `rgba(70, 75, 58, 1)`      |
| `vandeer-color-fill-brand-secondary-inverse-default`     | `rgba(98, 105, 81, 1)`     |
| `vandeer-color-fill-brand-secondary-inverse-hover`       | `rgba(124, 132, 102, 1)`   |
| `vandeer-color-surface-neutral`                          | `rgba(255, 255, 255, 0.1)` |
| `vandeer-color-surface-neutral-inverse`                  | `rgba(0, 0, 0, 0.1)`       |
| `vandeer-color-surface-brand`                            | `rgba(104, 8, 24, 1)`      |
|                                                          |                            |

***

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
### Color System

Understand how to use color.

[Learn more →](docId\:fHn4OQ-4WtbtOR494m6AT)
:::

:::LinkArrayItem
### Using Color

Accessing color in design and code.

[Learn more →](docId\:R7qgMYE8GoR12wH7wuDca)
:::
::::