Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Observability Kit, SSO Kit, and Swing Kit. Read the blog post.

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