Reference
All color tokens
Every color token, parsed from globals.css. The full set, one-offs included. The Color page shows the system they resolve to.
--color-accent | var(--accent) | |
--color-accent-foreground | var(--accent-foreground) | |
--color-amber-light-bg | #fff8ed | |
--color-amber-light-bg-hover | #fff2d9 | |
--color-amber-light-border | #f2d195 | |
--color-amber-light-fg | #bf7900 | |
--color-amber-pale-bg | #fef8e9 | |
--color-background | var(--background) | |
--color-black | #1f1f1f | |
--color-body-secondary | #4b4b4b | |
--color-border | var(--border) | |
--color-border-gray-100 | #e9e9e9 | |
--color-border-support | #e1e3e6 | |
--color-button-neutral | #e9e9e9 | |
--color-card | var(--card) | |
--color-card-foreground | var(--card-foreground) | |
--color-chart-1 | var(--chart-1) | |
--color-chart-2 | var(--chart-2) | |
--color-chart-3 | var(--chart-3) | |
--color-chart-4 | var(--chart-4) | |
--color-chart-5 | var(--chart-5) | |
--color-check-in-label | #554b4b80 | |
--color-check-in-progress | #6edb8e | |
--color-checkout-cta | rgba(85, 85, 85, 0.6) | |
--color-component-neutral | #f1f1f1 | |
--color-content-neutral | #b5b5b5 | |
--color-content-neutral-body | #838282 | |
--color-content-neutral-body-light | #bdbdbd | |
--color-content-neutral-body-light-faded | #a3a3a3 | |
--color-content-neutral-body-strong | #878787 | |
--color-content-neutral-card-subtitle | #767676 | |
--color-content-neutral-disabled | #9c9c9c | |
--color-content-neutral-soft | #9b9b9b | |
--color-content-neutral-subtitle | #969696 | |
--color-content-neutral-support | #d8d8d8 | |
--color-danger | #9d0d11 | |
--color-danger-bg | #f5e7e7 | |
--color-danger-border | #e2b6b8 | |
--color-danger-on-dark | #ffb4b6 | |
--color-destructive | var(--destructive) | |
--color-destructive-foreground | var(--destructive-foreground) | |
--color-divider-soft | #e5e5e5 | |
--color-fg-dim | rgba(5, 5, 5, 0.4) | |
--color-fg-muted | rgba(5, 5, 5, 0.56) | |
--color-fg-strong | rgba(5, 5, 5, 0.88) | |
--color-foreground | var(--foreground) | |
--color-form-nav-active-from | #8b8b8b | |
--color-graphite | #3f3f3f | |
--color-gray-dark | #333333 | |
--color-gray-darker | #222222 | |
--color-gray-faint | #f0f0f0 | |
--color-gray-muted | #8a8a8a | |
--color-gray-pale | #d7d7d7 | |
--color-gray-soft | #ababab | |
--color-icon-neutral | #908e8e | |
--color-info-bg | var(--info-bg) | |
--color-info-fg | var(--info-fg) | |
--color-ink | #121212 | |
--color-ink-muted | rgb(30 30 30 / 0.8) | |
--color-input | var(--input) | |
--color-light-gray | #d9d9d9 | |
--color-light-gray-200 | #787878 | |
--color-light-gray-300 | #767676 | |
--color-mid-gray | #adadad | |
--color-muted | var(--muted) | |
--color-muted-foreground | var(--muted-foreground) | |
--color-near-black | #050505 | |
--color-neutral | #eeeeee | |
--color-neutral-border | #e1e1e1 | |
--color-neutral-border-active | #1b1c1e | |
--color-neutral-border-strong | #cccccc | |
--color-neutral-border-tables | #d4d4d4 | |
--color-neutral-content-placeholder | #a2a1a1 | |
--color-neutral-gray | #6b6b6b | |
--color-neutral-surface-disabled | #eaeaea | |
--color-neutral-surface-tables | #f2f2f2 | |
--color-notification-dot | #fe9b00 | |
--color-overview-quick-action-icon | #696969 | |
--color-page-ground | #ececec | |
--color-pill-button-muted | rgb(156 104 111 / 0.6) | |
--color-popover | var(--popover) | |
--color-popover-foreground | var(--popover-foreground) | |
--color-primary | var(--primary) | |
--color-primary-foreground | var(--primary-foreground) | |
--color-required-mark | #d11a2a | |
--color-ring | var(--ring) | |
--color-row-hover | #e8e8e8 | |
--color-rumor-disabled-border | #bfbfbf | |
--color-rumor-hover-soft | #f0f0f0 | |
--color-rumor-input-border | #e1e1e1 | |
--color-rumor-input-placeholder | #666666 | |
--color-rumor-lime | #b7ff00 | |
--color-rumor-mid-gray | #b8b8b8 | |
--color-rumor-soft-gray | #cfcfcf | |
--color-secondary | var(--secondary) | |
--color-secondary-foreground | var(--secondary-foreground) | |
--color-sidebar | var(--sidebar) | |
--color-sidebar-accent | var(--sidebar-accent) | |
--color-sidebar-accent-foreground | var(--sidebar-accent-foreground) | |
--color-sidebar-border | var(--sidebar-border) | |
--color-sidebar-foreground | var(--sidebar-foreground) | |
--color-sidebar-primary | var(--sidebar-primary) | |
--color-sidebar-primary-foreground | var(--sidebar-primary-foreground) | |
--color-sidebar-ring | var(--sidebar-ring) | |
--color-sort-recommendation-end | #ad998e | |
--color-sort-recommendation-start | #28211e | |
--color-status-confirmed-bg | var(--color-success-surface-light) | |
--color-status-confirmed-fg | var(--color-success-deep-fg) | |
--color-status-declined-bg | var(--color-danger-bg) | |
--color-status-declined-fg | var(--color-danger) | |
--color-status-invited-bg | var(--info-bg) | |
--color-status-invited-fg | var(--info-fg) | |
--color-status-requested-bg | var(--color-amber-pale-bg) | |
--color-status-requested-fg | var(--color-warning-fg) | |
--color-status-shortlist-bg | var(--color-warning-light-bg) | |
--color-status-shortlist-fg | var(--color-warning-light-foreground) | |
--color-stone-link | #9c7f73 | |
--color-subtitle | #1e1e1e | |
--color-success | var(--success) | |
--color-success-bg | var(--success-bg) | |
--color-success-border | var(--success-border) | |
--color-success-deep-fg | #167e60 | |
--color-success-foreground | var(--success-foreground) | |
--color-success-light-bg | #e8f2ef | |
--color-success-surface-light | var(--success-surface-light) | |
--color-support-dark-brown | #2f2f2f | |
--color-support-global-black | #000000 | |
--color-support-global-link | #a28b7f | |
--color-surface-dim | #d2d2d2 | |
--color-surface-hover-light | #f5f5f3 | |
--color-surface-hover-warm | #e2ddda | |
--color-surface-muted | #efefef | |
--color-surface-neutral | #ececec | |
--color-surface-page | #f8f8f8 | |
--color-surface-secondary | #e9e9e9 | |
--color-surface-subtle | #fbfbfb | |
--color-surface-support | #d8d8d8 | |
--color-surface-tint | #27272712 | |
--color-surface-tint-soft | #0000000f | |
--color-surface-warm | #e8e0db | |
--color-swatch-mauve | rgba(156, 104, 111, 0.25) | |
--color-table-border | #e9e9e9 | |
--color-table-surface | #fbfbfb | |
--color-thumb-rose | #e9b6c6 | |
--color-thumb-sky | #9db6cf | |
--color-thumb-warm | #f0c58e | |
--color-ticket-bar-mist | #e3e3e3 | |
--color-ticket-bar-periwinkle | #b1b7cd | |
--color-ticket-bar-rose | #cdb1b3 | |
--color-ticket-bar-sage | #b1cdb9 | |
--color-ticket-bar-sand | #cdbab1 | |
--color-ticket-card-fill | rgba(47, 47, 47, 0.1) | |
--color-ticket-flow-ground | #f2f2f2 | |
--color-ticket-row-fill | rgba(255, 255, 255, 0.2) | |
--color-tier-high-from | #d9f0e9 | |
--color-tier-high-to | #a5d1c5 | |
--color-tier-low-from | #f3dddd | |
--color-tier-low-to | #eab4b7 | |
--color-tier-mid-from | #ede5d1 | |
--color-tier-mid-to | #f1d595 | |
--color-true-black | #000000 | |
--color-warm-stone | #cdbab1 | |
--color-warm-stone-deep | #9f8980 | |
--color-warm-stone-light | #e4c8bb | |
--color-warning | var(--warning) | |
--color-warning-alt-fg | #c38d0b | |
--color-warning-bg | var(--warning-bg) | |
--color-warning-dark-fg | #c79110 | |
--color-warning-fg | #d9a21f | |
--color-warning-foreground | var(--warning-foreground) | |
--color-warning-light-bg | #faf0e8 | |
--color-warning-light-foreground | #ce6418 |