Color Roles in the DevExpress Design System

• Dec 17, 2025
• 3 minutes to read

Color roles define the function and semantic purpose of each UI color. In the DevExpress Design System, these roles follow a multi-layer model that maps high-level design intent to specific visual values. This structure has the following advantages:

• Visual consistency : A unified color language makes interfaces easier to scale and keeps styling consistent across components.
• Accessibility : Role-based colors account for contrast requirements. Standard pairings (such as text and background) align with WCAG contrast guidelines.
• Theme awareness : The resulting color value adapts dynamically to the active theme and its color mode (light or dark).
• Reduced maintenance : Designers and developers define the appearance once instead of creating separate designs for each theme.

Color Role Schema

The DevExpress Design System uses the same color-layer schema for all themes and color modes (light or dark). Follow this schema to assign roles correctly. The table below lists all color layers:

High-Level Role	Semantic Role	Intensity	State
Surface	Neutral	Default	Rest
Content	Primary	Subdued	Active
Border	Secondary	Deep	Hovered
	Info	Compound	Selected
	Success	Alpha	Selected-Hovered
	Warning	Accessible	Disabled
	Danger		Static-Light
	Backdrop		Static-Dark
	Transparent		Inverted
	Highlight		On-Surface
	Utility

These layers help you build a path to a specific color value, for example: Content → Primary → Default → Hovered.

Note

Our Design System does not cover all potential combinations.

High-Level Roles

The DevExpress Design System operates with the following high-level roles:

SurfaceA background (surface) for content. Surfaces always use light colors in light mode, and dark colors in dark mode.ContentText or graphics displayed on a surface. Usually use inverted colors compared to surface. Content colors do not change in all states (except for disabled).BorderSurface borders.

Semantic Roles

The DevExpress Design System defines relevant semantic roles for each high-level role. The following semantic roles are available:

PrimaryMain brand or accent color.SecondaryAn additional accent color used for secondary elements.InfoColors used for informational messages (notes).SuccessColors used to convey success states.WarningColors used to convey warnings.DangerColors used to convey error states.NeutralGrayscale colors used throughout the interface for backgrounds, surfaces, dividers, and text (light/dark variants).BackdropColors used to shade background information.HighlightService colors used to highlight small application/component regions.TransparentColor used to create transparent backgrounds.UtilityColors used for data visualization, categorization, and analytical contexts.

Intensity

You can choose the color intensity from the following values:

DefaultThe brightest shade.SubduedMeduim brightness of the shade.DeepThe least bright shade.CompoundA semantic extension of high-level roles. May be of use if you need several high-level roles to have the came color.AlphaAdjusts color opacity using the alpha channel.AccessibleThe shade that meets the Non-Text Contrast criterion for small UI elements.

States

Components can have the following design states:

RestColors used to convey the default state (component is not being interacted with).HoveredColors used to convey the hovered state.SelectedColors used to convey the selected state.Selected-hoveredColors used to convey selected and hovered state.DisabledColors used to convey the disabled state.Static-lightLight colors that do not change in light/dark modes.Static-darkDark colors that do not change in light/dark modes.InvertedColors that are inverted from primary (for accents).On-surfaceColors used for content or other surfaces placed on a surface.