> Markdown version of [Style Properties](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Lumo Style Properties

Lumo is based on a set of style properties — CSS custom properties — representing colors, fonts, sizes and other styles, that can be customized by providing new values for them in a CSS stylesheet, either globally, or [scoped](https://vaadin.com/docs/next/styling/styling-components.md#styling-component-instances) to a certain component type or instance.

[Image: A small sample of Lumo style properties and their use in Vaadin components]

Lumo Style Properties Example & Use in Vaadin Components

Customizing Values of Lumo Style Properties

```css
html {
  --lumo-primary-color: green;
  --lumo-font-family: 'Roboto';
}
```

Lumo style properties can also be used in CSS instead of hard-coded literal values, through the `var()` function:

Use of Lumo Style Properties in Custom CSS

```css
div {
  border: 1px solid var(--lumo-primary-color);
  border-radius: var(--lumo-border-radius-m);
}
```

The [Styling Vaadin Components](https://vaadin.com/docs/next/styling/styling-components.md) section provides more details on using Lumo properties to modify the look and feel of Vaadin components. The [Styling Elements](https://vaadin.com/docs/next/styling/styling-elements.md) section provides more details on using Lumo properties to style other UI elements.

## <a id="lists-of-lumo-style-properties"></a>Lists of Lumo Style Properties

- [Color](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/color.md): Colors and their corresponding style properties defined in the Lumo theme.
- [Typography](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/typography.md): Tables of Lumo style properties related to displaying and formatting text.
- [Size & Space](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/size-space.md): Listing of Lumo style properties related to setting the size and spacing of text and components.
- [Shape](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/shape.md): Describing the Lumo style properties related to component shapes.
- [Elevation](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/elevation.md): Listing of Lumo elevation style properties, the visual stacking of elements in a UI.
- [Interaction](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/interaction.md): Lumo style properties related to how interactions are indicated in an application.