Design System Foundation
- 2 minutes to read
The DevExpress Design System provides a unified visual language for DevExpress UI components. This structured foundation helps us build application themes and allows you to customize those themes to match your corporate style (brand guidelines).
The DevExpress Design System documentation targets the following audiences:
- Designers
- Create Figma mockups using the same tokens and themes as developers.
- Developers
- Customize DevExpress components or build new components that follow the DevExpress visual style.
Important
The current version of the Design System applies to DevExpress Blazor suite.
Design Tokens
The DevExpress Design System uses design tokens to declare color, typography, spacing, border, opacity, and shadow styles. Tokens are organized into two levels:
- Base Tokens
- Raw design scales that include color palettes, font sizes, line heights, spacing steps, border radius and width, and opacity levels.
- Semantic Tokens
- Intent-based tokens that describe purpose (primary surface background, content, focus border, caption text). Semantic tokens are theme-aware and adapt their values to the active theme and its color mode (light or dark).
In Blazor applications, tokens are exposed as public CSS variables with the --dxds- prefix. Blazor components reference these variables instead of hard-coded values. When a theme palette or color mode changes, CSS variables update their values, and component appearance adjusts automatically. For more information about CSS variables in DevExpress Blazor Fluent themes, refer to the following help topic: CSS Variables in Fluent Themes.
Designers can use the same tokens in Figma. Tokens are available as shared Foundation Tokens and in theme token collections. Foundation tokens build the Blazor UI Kit Fluent Theme. This UI Kit includes ready-to-use components that replicate the look and feel of runtime controls.
DevExpress Design System: Usage Scenarios
The DevExpress Design System helps you customize existing DevExpress components (apply your corporate brand style) or create new components. Key steps include:
Customize DevExpress Components
- Adjust theme and utility palette tokens to reflect brand colors. Semantic color tokens map these palettes automatically.
Create New Components
- Select semantic color tokens based on entity (surface, content, border, shadow), color group (primary, secondary, neutral), intensity, and state.
- Use semantic typography tokens (caption, base, title, headline levels) instead of custom font sizes or weights.
- Use predefined spacing, border, opacity, and shadow scales instead of arbitrary values.