Color Tokens

Use color tokens to apply color to your UI.

Instead of using color names for our tokens, we use semantic tokens that represent the intent you are trying to achieve.

Foreground (fg) tokens are for text, icons and borders.
Background (bg) tokens are for surfaces and UI elements.
Status tokens are for any feedback the user must be aware of.
Highlight tokens are for non-important elements that you'd like to stand out.

Determine each token's intent using the table below.

Name

Description

--fg-default

Default color for text, icons and borders.

--fg-moderate

Content that is secondary or that provides additional context.

--fg-subtle

Dividers or other elements not critical to understanding the flow of an interface.

--fg-minimal

Dividers or other elements not critical to understanding the flow of an interface.

--fg-inverse

Use on bg.primary.

--fg-primary

The most important elements in the interface in which a user must take action on.

--fg-primary-strong

Selected text, icons and borders.

--fg-primary-minimal

For content that is secondary or that provides additional context. Does not pass contrast standards.

--fg-global-black

When UI element will always be black regardless of theme.

--fg-global-white

When UI element will always be white regardless of theme.

--fg-focus

The color used to indicate focus on an interactive element, such as a button or input field.

--fg-focus-inverse

The inverse color of the focus color, used to indicate focus on elements with a dark background. This color should provide enough contrast with the dark background to be easily visible.

--fg-text-link

For hyperlinks. This passes contrast standards on the background and surrounding text.

--bg-base

The lowest in the background layer order. All bg layers stack on top of this.

--bg-default

Default background color.

--bg-layer-one

For elements that lay on top of bg.default and lower layers.

--bg-layer-two

For elements that lay on top of bg.default and lower layers.

--bg-layer-three

For elements that lay on top of bg.default and lower layers. Check contrast when using.

--bg-primary

The most important elements in the interface in which a user must take action on.

--bg-primary-strong

A focal point of content.

--bg-primary-minimal

Content that is secondary or that provides additional context. Needs a border to pass contrast standards.

--bg-transparent

--status-positive

A positive message, like a placing or winning a bet.

--status-positive-strong

A positive message, like a placing or winning a bet.

--status-positive-subtle

--status-positive-minimal

--status-negative

A negative message, like an error, blocking status or a loss of a bet.

--status-negative-strong

--status-negative-subtle

--status-negative-minimal

--status-alert

A standard alert message, indicating a noteworthy event or condition that requires user attention, such as important updates or reminders.

--status-alert-strong

--status-alert-subtle

--status-alert-minimal

--status-notification

Use when communicating a non-critical notification in the application interface.

--status-informational

A standard informational message, providing additional context or guidance without implying any positive or negative sentiment.

--status-informational-strong

--status-informational-subtle

--status-informational-minimal

--highlight-accent

Indicate changing elements like live scores.

--highlight-accent-strong

--highlight-accent-subtle

--highlight-accent-minimal

--highlight-brand

Indicate elements that have a brand flair.

--highlight-one

Highlight a non-important UI element. May not pass contrast standards for foreground.

--highlight-two

Highlight a non-important UI element. May not pass contrast standards for foreground.

--highlight-three

Highlight a non-important UI element. May not pass contrast standards for foreground.

--highlight-four

Highlight a non-important UI element. May not pass contrast standards for foreground.

--highlight-five

--rewards-background

When Caesars Rewards requires a call to action or reference.

--gradient-brand

--gradient-highlight-one

--gradient-highlight-two

--gradient-highlight-three

--gradient-highlight-four

--gradient-highlight-five