# CSS Variables

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&#x26;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&#x26;token=a6afd40b-13b6-4416-9cf4-685e65dcd11e" alt=""><figcaption><p>primary color as CSS variable</p></figcaption></figure>