Lumo

Vaadin Lumo Styles

Lumo is an evolving design system foundation for modern web applications. Vaadin components implement Lumo as their default theme.

Getting started

1. Install

To start using the Lumo styles you need to install the vaadin-lumo-styles package using Bower.

2. Import and include main style modules

Import and include the main style modules in the global scope to make your application use Lumo styles:

3. Next steps

• Get to know the foundation which defines the overall look and feel of the system.
  • Typography
  • Color
  • Style
  • Sizing and Spacing
  • Icons
• Get to know the utilities, like Badges, which offer ready-made styles for small but common use cases.
• Learn how to customize the styles to your needs.
• Remember to read about browser compatibility, if you need to support Internet Explorer 11 or EdgeHTML 14.