Site styles

The My Site → Style section allows Creators and developers to configure colours, fonts, and custom CSS for a site.

Colours

Four palette colours can be configured:

• Primary colour — the primary brand colour. Applied to links (<a>) by default.
• Secondary colour — a secondary brand colour used throughout the site.
• Site background colour — the default page background colour.
• Site text colour — the default text colour.

These values are exposed as CSS custom properties at runtime:

:root {
    --primary: #bbcfcf;
    --secondary: #eeece6;
    --body-bg: #f7f7f9;
    --body-color: #466169;
}

Easol also generates a set of accessible design tokens based on these palette colours. These semantic CSS variables are injected as :root variables at runtime and can be used throughout your theme.

Fonts

Fonts can be uploaded and assigned to the site's typography settings:

• Headings font family — applied by default to all h1–h6 elements.
• Body font family — applied by default to paragraphs, links, and most other text elements.

These values are exposed as CSS custom properties at runtime:

:root {
    --font-family-base: "Open Sans";
    --headings-font-family: "Oswald";
}

Additional fonts can be uploaded, but they are not automatically exposed as CSS variables. If you plan to use multiple font families throughout your theme, we recommend defining your own CSS variables or utility classes.

Custom CSS

The Style Override field allows custom CSS to be added to a site.

Any CSS entered here is loaded after the theme's compiled stylesheet (/style.css) and can be used to override theme styles without modifying the theme code.

This feature is available to all creators, regardless of developer access.