Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Design Tokens

The design tokens, such as colors, typography and other visual styles that define the Lumo theme.

The core Lumo package defines the basic building blocks for component themes as CSS custom properties (also known as design tokens) such as colors, typography and other visual styles. You can use these design tokens to provide consistent visual styles across your application.

Topics

Styling Using Design Tokens
Learn how to use Lumo design tokens to style your application and components.
Typography
Color
Size and Space
Shape
Elevation
Interaction