> 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
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.
### 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: