> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/content/shopping-experiences/css-variables.md).

# CSS Variables

CSS variables are an official part of the CSS specification and are called CSS Custom Properties

The theme delivers CSS variables for the most important settings from the theme configuration. You can inspect them in the storefront using your browser's developer tools (in browser: right-click > Inspect). CSS variables help you to ensure a uniform appearance in the presentation of your storefront.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F970RxB3WwUgmOzvDMz3H%2Fdocs-de-storefront-css-root-variables-example.png?alt=media&amp;token=04a5fbba-52cc-40ca-a71e-0ee099b709f5" alt=""><figcaption></figcaption></figure>

### Available CSS Variablen

```css
// CSS Variables
--zen-layout-container-width
--zen-layout-button-radius
--zen-layout-input-radius
--zen-layout-element-radius
--zen-color-brand-primary
--zen-color-brand-secondary
--zen-border-color
--zen-background-color
--zen-container-bg
--zen-meta-theme-color
--zen-text-color
--zen-light-text-color
--zen-headline-color
--zen-light-headline-color
--zen-color-price
--zen-color-buy-button
--zen-color-buy-button-text
--zen-gray-100
--zen-gray-200
--zen-gray-300
--zen-gray-400
--zen-gray-500
--zen-gray-600
--zen-gray-700
--zen-gray-800
--zen-gray-900
--zen-font-family-base
--zen-font-family-headline
--zen-font-size-base
--zen-h1-font-size
--zen-h2-font-size
--zen-h3-font-size
--zen-h4-font-size
--zen-h5-font-size
--zen-h6-font-size
--zen-font-weight-base
--zen-headings-font-weight
```

### Usage

The color value stored in the variable corresponds to the setting from the theme configuration. You can use a CSS variable in the color fields of the experience elements, for example.

```
//  Calling the primary color of the shop as a CSS variable
var(--zen-color-brand-primary)
```

Example:

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FVBj11V8agjIHOc04p30Q%2Fdocs-en-config-shopping-experiences-css-variables.png?alt=media&amp;token=a6afd40b-13b6-4416-9cf4-685e65dcd11e" alt=""><figcaption><p>primary color as CSS variable</p></figcaption></figure>