Skip to content

Colors

Colors help you communicate the structure of your UI, emphasize any important information, or signal different states of the UI. Use colors intentionally — they are not decoration and should always serve a purpose.

👉 All colors on this page can be changed by overriding values in your design tokens.

General Guidelines

  • Most colors in React UI are semantic: they bear a meaning and target a specific use case. The only non-semantic exception is the neutral colors that are included in React UI due to their frequent usage in UI designs.
  • React UI does not try to suggest any global color palettes. Instead, you are encouraged to pick any color palettes you want and map them onto the semantic colors of React UI.
  • In general, colors in React UI can be used for either static (most of the text colors and most of the background colors) or interactive use cases (action colors, feedback colors). However, some colors are designed to be either: neutral colors can be used for static and interactive parts similarly to the primary border color.
  • Interactive color variants always define hover and active (pressed) states.
  • Action, feedback, and neutral colors suggest what color should be used for the text placed on them. You don't have to think if black or white makes a better contrast — just use on-primary for text on primary color background or on-success for success color background, and you should be safe.

Text Colors

Colors reserved for text. Base text can have primary or secondary priority, while both priorities can be suppressed with the disabled variants. Last but not least, the text colors define the color of links.

Action Colors

Action colors communicate the importance of an action which can be primary or secondary. Using the selected color, you can also mark an action as the currently selected.

Feedback Colors

Feedback colors help communicate a meaning: green means success, orange means warning, and red means danger or error. On top of that, there are a few more feedback colors to fit various design situations.

Neutral Colors

Neutral colors are intended for neutral variants of components that support colors. The light color works well with dark backgrounds. Conversely, the dark color stands out on light backgrounds.

Background Colors

Colors reserved for backgrounds.

Content Layers

Backgrounds for the fundamental UI areas and content layering.

👉 Content layers can be separated from background using their shadow counterparts: background-layer-1 + shadow-layer-1 etc.

Component Backgrounds

Basic backgrounds for components.

💡 What is the difference between background-base and background-basic? While the base background is intended for the bottom-most layer of your UI, the basic background is the default go-to background for components.

Interactive Areas

Backgrounds to highlight interactive areas on hover and during interaction.

💡 Please note the default interactive background is always transparent, so it does not stand in the way of the underlying component background.

Action Backgrounds

Backgrounds for areas with actionable content.

Feedback Backgrounds

Backgrounds for feedback areas.

Neutral Backgrounds

Neutral backgrounds to help you structure your content.

Border Colors

Colors reserved for borders. With borders, you can separate content areas, components, or their parts. For interactive context, you should always use the primary border.

Applying Colors

Components can apply colors above using one or more following approaches.

Color Collections

Some components (Alert, Badge, Button, and more) come in more color variants to help you better reflect their place in content hierarchy or the meaning of their content. In such cases, one or more Color Collections are always used. There is always a reasonable default color for the component in question that can be changed to any of supported collection values through the color prop.

Validation States

All form field components that support validation states (CheckboxField, TextField, Toggle and more) apply selected feedback colors for individual states:

  • success feedback color for valid state,
  • warning feedback color for warning state,
  • danger feedback color for invalid state.

Validation state is always optional. Default styling is applied for the given component when its validationState prop is not specified.