Copy page

Custom Code Specification

CSS Variables

Note: code examples and example values are included for illustration purposes, and may not reflect the exact values on a Squarespace website.

Color Palette

Version 7.1 sites only.

Each variable corresponds to a fixed position in the site's five-color palette. Since site owners can set the palette to use any color, variable names may not accurately reflect the color's lightness in relation to other palette colors.

These variables' values are all valid CSS colors (such as hsl(0, 0%, 100%)) and may be used in CSS rules as-is.

--sqsp-palette-lightest-color

The color assigned to the leftmost position of the site's color palette.

Code
background-color: var(--sqsp-palette-lightest-color);

--sqsp-palette-light-color

The color assigned to the second-from-left position of the site's color palette.

Code
background-color: var(--sqsp-palette-light-color);

--sqsp-palette-accent-color

The color assigned to the center position of the site's color palette.

Code
background-color: var(--sqsp-palette-accent-color);

--sqsp-palette-dark-color

The color assigned to the second-from-right position of the site's color palette.

Code
background-color: var(--sqsp-palette-dark-color);

--sqsp-palette-darkest-color

The color assigned to the rightmost position of the site's color palette.

Code
background-color: var(--sqsp-palette-darkest-color);

Theme Colors

Version 7.1 sites only.

The values of these variables are theme-aware. They will vary based on the color theme of the containing section/element or the site's default color theme. Their values are all valid CSS colors (such as hsla(0, 0%, 100%, 1)) and may be used in CSS rules as-is.

--sqsp-background-color

The background color of sections and other elements.

Code
background-color: var(--sqsp-background-color);

--sqsp-link-color

The color of links.

Code
color: var(--sqsp-link-color);

--sqsp-heading-1-color

The color of Heading 1 text.

Code
color: var(--sqsp-heading-1-color);

--sqsp-heading-2-color

The color of Heading 2 text.

Code
color: var(--sqsp-heading-2-color);

--sqsp-heading-3-color

The color of Heading 3 text.

Code
color: var(--sqsp-heading-3-color);

--sqsp-heading-4-color

The color of Heading 4 text.

Code
color: var(--sqsp-heading-4-color);

--sqsp-paragraph-1-color

The color of Paragraph 1 text.

Code
color: var(--sqsp-paragraph-1-color);

--sqsp-paragraph-2-color

The color of Paragraph 2 text.

Code
color: var(--sqsp-paragraph-2-color);

--sqsp-paragraph-3-color

The color of Paragraph 3 text.

Code
color: var(--sqsp-paragraph-3-color);