Vaadin Design System

Vaadin components are designed to be intuitive, responsive and adaptable for any type of business application. Each component is based on the Web Components standard, and natively supported by all modern browsers. They are framework agnostic, but optimized for use with Vaadin Java backends.

Vaadin’s Lumo and Material themes provide foundational styles – typography, colors, sizing, spacing and icons – that provide a modern look and feel for Vaadin components. They are easily customizable without css expertise thanks to parameterized styles and excellent documentation.

Designers can use the Vaadin Figma Library to create pixel perfect UI designs and prototypes that can be handed over to developers with ease. The kit contains graphical representations of all Vaadin components with the default Lumo styling that can be easily adapted to suit your branding and vision.

At the heart of Vaadin’s design system are comprehensive technical documentation and usage guidelines for components and theme features to help you achieve an excellent user experience in any application.

Components and themes can be easily packaged into a single design system dependency for reuse in multiple applications. This feature works with Vaadin Flow and Fusion frameworks.

An CLI-based tool that provides a simple way to document Vaadin-based custom design systems, including code samples and interactive demos for components. Simply author your content using an intuitive, AsciiDoc-based syntax, and the tool will generate a hostable documentation website to help your designers and developers find the information they need to build great applications.