> Markdown version of [Styling](https://vaadin.com/docs/v24/hilla/lit/guides/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/hilla/llms.txt)

## <a id="using-css-variables"></a>Using CSS Variables

Hilla uses the [Vaadin Lumo theme](https://vaadin.com/docs/latest/styling/lumo) as a base for component and application styling. Lumo is based on a set of CSS custom properties (variables) that you can use to achieve a consistent look and feel across applications. You can find the properties in the Vaadin styling documentation:

- [Typography](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/typography)

- [Color](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/color)

- [Size and Space](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/size-space)

- [Shape](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/shape)

- [Elevation](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/elevation)

- [Interaction](https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/interaction)

You can use the variables in place of hard-coded units using `var()`.

```css
.card {
  border: 1px solid var(--lumo-contrast-30pct);
  border-radius: var(--lumo-border-radius-s);
  box-shadow: var(--lumo-box-shadow-s);
}
```