Tokens
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.
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) |
| |