Wix exposes a comprehensive set of CSS variables a site's theme colors and fonts. You can use these variables when applying custom CSS styling to supported elements on a site. These variables represent the site's color and typography styles, enabling dynamic and consistent design across all components. Use this reference to identify and apply the correct variables for colors and fonts in code.
| Style | CSS Variable |
|---|---|
| Primary background | --wst-color-fill-background-primary |
| Secondary background | --wst-color-fill-background-secondary |
| Lines and dividers | --wst-color-line |
| Style | CSS Variable |
|---|---|
| Title | --wst-color-title |
| Subtitle | --wst-color-subtitle |
| Body text | --wst-color-text-primary |
| Secondary text | --wst-color-text-secondary |
| Links and actions | --wst-color-action |
| Disabled actions | --wst-color-disabled |
| Style | CSS Variable |
|---|---|
| Fill (Regular) | --wst-button-color-fill-primary |
| Border (Regular) | --wst-button-color-border-primary |
| Text (Regular) | --wst-button-color-text-primary |
| Fill (Hover) | --wst-button-color-fill-primary-hover |
| Border (Hover) | --wst-button-color-border-primary-hover |
| Text (Hover) | --wst-button-color-text-primary-hover |
| Fill (Disabled) | --wst-button-color-fill-primary-disabled |
| Border (Disabled) | --wst-button-color-border-primary-disabled |
| Text (Disabled) | --wst-button-color-text-primary-disabled |
| Style | CSS Variable |
|---|---|
| Fill (Regular) | --wst-button-color-fill-secondary |
| Border (Regular) | --wst-button-color-border-secondary |
| Text (Regular) | --wst-button-color-text-secondary |
| Fill (Hover) | --wst-button-color-fill-secondary-hover |
| Border (Hover) | --wst-button-color-border-secondary-hover |
| Text (Hover) | --wst-button-color-text-secondary-hover |
| Fill (Disabled) | --wst-button-color-fill-secondary-disabled |
| Border (Disabled) | --wst-button-color-border-secondary-disabled |
| Text (Disabled) | --wst-button-color-text-secondary-disabled |
| Style | CSS Variable |
|---|---|
| Base 1 | --wst-color-fill-base-1 |
| Base 2 | --wst-color-fill-base-2 |
| Shade 1 | --wst-color-fill-base-shade-1 |
| Shade 2 | --wst-color-fill-base-shade-2 |
| Shade 3 | --wst-color-fill-base-shade-3 |
| Accent 1 | --wst-color-fill-accent-1 |
| Accent 2 | --wst-color-fill-accent-2 |
| Accent 3 | --wst-color-fill-accent-3 |
| Accent 4 | --wst-color-fill-accent-4 |
| Style | CSS Variable |
|---|---|
| Heading 1 titles (reserved for page titles) | --wst-font-style-h1 |
| Heading 2 titles (recommended) | --wst-font-style-h2 |
| Heading 3 titles | --wst-font-style-h3 |
| Heading 4 titles | --wst-font-style-h4 |
| Heading 5 titles | --wst-font-style-h5 |
| Heading 6 titles | --wst-font-style-h6 |
| Large body text (paragraph 1) | --wst-font-style-body-large |
| Medium body text (paragraph 2; recommended) | --wst-font-style-body-medium |
| Small body text (paragraph 3) | --wst-font-style-body-small |