Core colors

Set of colors that are consistent with the branding guidelines of Blue Yonder and are widely used in the default states of interface elements and page layouts to bring consistency throughout the applications.

Color roles

Core color tokens are used to cover the majority of common interface components and their functions. In general, they refer to the 12-step basic color palette entries; however, there may be specific tokens that refer to a single color value.

The foundation of the color system is based on the usage of several global colors.

Main colors

neutral
Main colors for UI elements. We use it for solid backgrounds in interactive elements like primary buttons and hyperlinks. The gray scale is primarily used for text, borders and backgrounds and white as our background color, is mostly used in panels and sidebars. Use Neutral for majority of elements, enabling construction of “invisible” interfaces that allows users to focus on the work.
accent
Accent color is the most dominant color in the theme. It is used for links, controls, and other interactive elements. Use Accent for drawing users attention to key interface elements and important interactions.
brand
Brand colors in the UI should be used purposefully to reinforce identity without overwhelming core interactions.

Alert colors

Alert colors play the role of drawing immediate attention to important system states, helping users quickly understand when something needs caution, action, or awareness.

success
error
warning
info

Priority colors

Priority colors communicate the importance of the message. They provide 5 levels of importance: Critical, High, Medium, Low, or Neutral.

priority-critical
priority-high
priority-medium
priority-low
priority-neutral

Overlay colors

Black and white colors provide neutral overlays for shadows, highlights, and translucency that work on top of any palette. They’re used to create depth, focus, and emphasis—things like drop shadows, dimming overlays, and subtle highlights—without introducing new hues that could clash with accent or gray scales. They are provided as light/dark theme independant 12-steps color scales and as solid values.

black — overlays and pure black
white — overlays and pure white

Accessing token values

All listed tokens are presented in solid and alpha variants. Each variant is a set of 12 steps. Additional "contrast" step is used for foreground over the step 9 and 10 backgrouds.

All core color tokens are available as CSS variables, such as var(--color-neutral-12):

.my-class {
  background-color: var(--color-steel-12);
}

You can use them as Tailwind color utilities, for example text-neutral-12:

<Label className="text-neutral-12">My Button</Label>

For detailed guidance on Tailwind theme variables and applying styles with utility classes, see the Tailwind theme documentation.

Understanding color scale steps

All the core colors (except pure black and white) are provided in sets of 13 steps, where each step is tailored to be used in a certain role. Colors and roles are selected to fulfill WCAG accessibility requirements.

Steps 1–2: Backgrounds

Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.

Appropriate applications include:

Main app background
Striped table background
Code block background
Card background
Sidebar background
Canvas area background

You may want to use white for your app background in light mode, and Step 1 or 2 from a gray or colored scale in dark mode. In this case, set up a mutable alias for AppBg and map it to a different color for each color mode.

Steps 3–5: Component backgrounds

Steps 3, 4, and 5 are designed for UI component backgrounds.

Step 3 is for normal states.
Step 4 is for hover states.
Step 5 is for pressed or selected states.

If your component has a transparent background in its default state, you can use Step 3 for its hover state.

Steps 11 and 12—which are designed for text—are guaranteed to Lc 60 and Lc 90 APCA contrast ratio on top of a Step 2 background from the same scale.

Steps 6–8: Borders

Steps 6, 7, and 8 are designed for borders.

Step 6 is for subtle borders on components which are not interactive—for example sidebars, headers, cards, alerts, and separators.
Step 7 is for subtle borders on interactive components.
Step 8 is for stronger borders on interactive components and focus rings.

Steps 9–10: Solid backgrounds

Steps 9 and 10 are designed for solid backgrounds.

Step 9 has the highest chroma of all steps in the scale—the purest step, mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications:

Website/app backgrounds
Website section backgrounds
Header backgrounds
Component backgrounds
Graphics/logos
Overlays
Coloured shadows
Accent borders

Step 10 is designed for component hover states, where Step 9 is the component's normal state background.

Most Step 9 colors are designed for white foreground text. Sky, Mint, Lime, Yellow, and Amber are designed for dark foreground text on Steps 9 and 10.

Steps 11–12: Text

Steps 11 and 12 are designed for text.

Step 11 is for low-contrast text.
Step 12 is for high-contrast text.

Contrast step

The contrast step is designed to be used over backgrounds colored with Step 9 or 10. Using the contrast step helps meet accessibility contrast requirements.

Available color tokens

Interactive table: filter by name, click a swatch to copy token names and resolved light/dark values. The table lists solid scales only; for numbered steps (1–12), the matching alpha token and scale-step guidance appear in the same detail dialog.

Loading color tokens…

--card-default — use for any card as a base background color.
--card-alternate — use to differentiate card from others or as a background for card grid.

Data grid

Use for backgrounds of table elements.

--data-grid-default-cell — regular cell background
--data-grid-alternate-cell — alternate row background
--data-grid-selected-row — selected row background
--data-grid-toolbar — table toolbar background
--data-grid-table-row-hover — background of a hovered row
--data-grid-readonly-cell — background of a read-only cell in case of editable table
--data-grid-disabled-cell — disabled row background

Cell formatting

For conditional or user-defined formatting.

1–12 — for backgrounds
13–24 — for foregrounds

For detailed guidance on Tailwind theme variables and utility classes, see the Tailwind theme documentation.

Component tokens (not stable yet)

Palette color tokens (palette)