Color Tokens

Brand, neutral, and overlay tokens including mode and brand switching.

This page is generated automatically from dist/tokens/tokens.yaml.

Brand A

Filtered from tokens.yaml (scope brand:a).

brand-color-accent var(--color-brand-a-green-400)
brand-color-accent-dark var(--color-brand-a-green-600)
brand-color-functional-base var(--color-brand-a-green-700)
brand-color-functional-base-dark var(--color-brand-a-green-900)
brand-color-functional-danger var(--color-brand-a-red-600)
brand-color-functional-success var(--color-brand-a-green-600)
brand-color-primary var(--color-brand-a-sand-700)
brand-color-primary-dark var(--color-brand-a-sand-900)
brand-color-subtle var(--color-neutral-500)
brand-color-subtle-dark var(--color-neutral-800)
brand-color-subtle-light var(--color-neutral-200)

Brand B

Filtered from tokens.yaml (scope brand:b).

brand-color-accent var(--color-brand-b-green-400)
brand-color-accent-dark var(--color-brand-b-green-800)
brand-color-functional-base var(--color-brand-b-purple-700)
brand-color-functional-base-dark var(--color-brand-b-purple-900)
brand-color-functional-danger var(--color-brand-b-red-600)
brand-color-functional-success var(--color-brand-b-green-600)
brand-color-primary var(--color-brand-b-purple-600)
brand-color-primary-dark var(--color-brand-b-purple-800)
brand-color-subtle var(--color-neutral-500)
brand-color-subtle-dark var(--color-neutral-800)
brand-color-subtle-light var(--color-neutral-200)

Light Semantic Mapping

Filtered from tokens.yaml (scope mode:light).

color-border-brand var(--brand-color-primary)
color-border-danger rgb(255 0 0)
color-border-default var(--color-neutral-800)
color-border-disabled var(--color-neutral-500)
color-border-strong var(--color-neutral-1000)
color-border-subtle var(--brand-color-subtle)
color-fill-active var(--brand-color-accent)
color-fill-brand var(--brand-color-primary)
color-fill-danger var(--brand-color-functional-danger)
color-fill-disabled var(--color-neutral-300)
color-fill-hover var(--color-neutral-alpha-500)
color-fill-subtle var(--brand-color-subtle-light)
color-fill-success var(--brand-color-functional-success)
color-fill-surface var(--color-neutral-000)
color-overlay-active var(--color-neutral-alpha-400)
color-overlay-backdrop var(--color-neutral-alpha-400)
color-overlay-hover var(--color-neutral-alpha-200)
color-overlay-selected var(--color-neutral-alpha-600)
color-text-brand var(--brand-color-primary)
color-text-danger var(--brand-color-functional-danger)
color-text-default var(--color-neutral-800)
color-text-disabled var(--color-neutral-600)
color-text-inverse var(--color-neutral-000)
color-text-strong var(--color-neutral-1000)
color-text-subtle var(--brand-color-subtle)
color-text-success var(--brand-color-functional-success)

Dark Semantic Mapping

Filtered from tokens.yaml (scope mode:dark).

color-border-brand var(--brand-color-primary)
color-border-danger var(--brand-color-functional-danger)
color-border-default var(--color-neutral-800)
color-border-disabled var(--color-neutral-500)
color-border-strong var(--color-neutral-1000)
color-border-subtle var(--brand-color-subtle-dark)
color-fill-active var(--brand-color-accent)
color-fill-brand var(--brand-color-primary)
color-fill-danger var(--brand-color-functional-danger)
color-fill-disabled var(--color-neutral-300)
color-fill-hover var(--color-neutral-alpha-500)
color-fill-subtle var(--brand-color-subtle)
color-fill-success var(--brand-color-functional-success)
color-fill-surface var(--color-neutral-1000)
color-overlay-active var(--color-neutral-alpha-400)
color-overlay-backdrop var(--color-neutral-alpha-400)
color-overlay-hover var(--color-neutral-alpha-200)
color-overlay-selected var(--color-neutral-alpha-600)
color-text-brand var(--brand-color-primary-dark)
color-text-danger var(--brand-color-functional-danger)
color-text-default var(--color-neutral-800)
color-text-disabled var(--color-neutral-600)
color-text-inverse var(--color-neutral-1000)
color-text-strong var(--color-neutral-1000)
color-text-subtle var(--brand-color-subtle-dark)
color-text-success var(--brand-color-functional-success)

Core Neutrals & Overlay

Filtered from tokens.yaml (scope global:core-primitives).

color-neutral-000 rgb(255 255 255)
color-neutral-100 rgb(230 230 230)
color-neutral-200 rgb(204 204 204)
color-neutral-300 rgb(179 179 179)
color-neutral-400 rgb(128 128 128)
color-neutral-500 rgb(128 128 128)
color-neutral-600 rgb(102 102 102)
color-neutral-700 rgb(77 77 77)
color-neutral-800 rgb(51 51 51)
color-neutral-900 rgb(26 26 26)
color-neutral-1000 rgb(0 0 0)
color-neutral-alpha-000 rgba(0 0 0 / 0)
color-neutral-alpha-100 rgba(0 0 0 / 0.1)
color-neutral-alpha-200 rgba(0 0 0 / 0.2)
color-neutral-alpha-300 rgba(0 0 0 / 0.3)
color-neutral-alpha-400 rgba(0 0 0 / 0.4)
color-neutral-alpha-500 rgba(0 0 0 / 0.5)
color-neutral-alpha-600 rgba(0 0 0 / 0.6)
color-neutral-alpha-700 rgba(0 0 0 / 0.7)
color-neutral-alpha-800 rgba(0 0 0 / 0.8)
color-neutral-alpha-900 rgba(0 0 0 / 0.9)
color-transparent rgba(0 0 0 / 0)