designsystem-405636-foundation.md
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:
DesignersCreate Figma mockups using the same tokens and themes as developers.DevelopersCustomize 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.
The DevExpress Design System uses design tokens to declare color, typography, spacing, border, opacity, and shadow styles. Tokens are organized into two levels:
Base TokensRaw design scales that include color palettes, font sizes, line heights, spacing steps, border radius and width, and opacity levels.Semantic TokensIntent-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.
The DevExpress Design System helps you customize existing DevExpress components (apply your corporate brand style) or create new components. Key steps include: