Style Guides - Where Each Color Appears in the System

What happens if I change a color in the style guide? What changes? Below is a list of places that your changes will affect. If you want to learn how to use and change Style guides, go to this guide.

Site Style Guides

This is associated with one site in particular, so you can have as many style guides as sites you have. For each site, the style guide will affect:

• Primary color affects...

  • Courses

  • Order forms (when the URL is linked to that site)

  • Product Catalog
    

  • Blogs - Buttons are created by default using the primary colour

  • Email broadcasts -Buttons are created by default using the primary colour

• Secondary color affects... 

  • Courses

  • Product Catalog

• Opt-in Form colors inside a page

• System Fonts affect...

  • Courses

  • Order forms

  • Blog

  • Forum

  • Navigation

  • Product Catalog

Default Style Guides

This will be the one used for any place in Simplero not linked to a specific site:

• Primary color affects...

  • Events (Registration Page)

  • Worksheets

  • Scheduling Links (Registration and confirmation Page)

• Secondary color affects... 

  • Events (Confirmation Page)

  • Worksheets

Below you can see more details and screenshots of how this will look on each page:

Site Style Guide

Inside a Course…

• Primary color (either for light or dark mode) -

  • Used for buttons (complete button and any other buttons inside the lesson)
    

  • Color when hovering over lessons
    
    

  • Send button color in comments:
    

• Secondary color (either for light or dark mode)-

  • Links
    
    

  • Complete button tick:
    

  • Progress bars:
    

Note: For system buttons (e.g., courses and calendars), we automatically set the text color based on the background (primary color). You cannot edit the text color.

  

On Order Forms... 

Order forms will use the style guide for the site where they are located. 

• Primary color (either for light or dark mode) -
  
  

On the Product Catalog... 

• Primary color (either for light or dark mode) -

  • Categories

• Secondary color (either for light or dark mode) -

  • Text on "Buy now" buttons
    

On Forms inside a page...

When you create an opt-in form inside a page, the form will use the colors under the FORMS section of your style guide:

Default Style Guide

On the Events Register Page... 

• Primary color (either for light or dark mode) on the default style guide -

  • Register Button
    
    
    

• Secondary color (either for light or dark mode) on the default style guide- 

  • Add to Calendar and Join now (Zoom) button (show after registration)
    
    

On Worksheets... 

Note! If you started in Simplero before February 2025, worksheets will be using your "legacy style guide" unless you delete it or rename it. 

• Primary color (either for light or dark mode) on the default style guide -

  • Buttons
    
    
    
    

• Secondary color on the default style guide - 

  • Worksheet title

  • Printing button
    
    
    

On Scheduling Links...

• Primary color (either for light or dark mode) on the default style guide - Used in toggles, highlight to indicate the current date, selected time, buttons, and text
  

System Fonts

System fonts affect every page that is created by default in the system:

• Blog

• Forum

• Order forms (attached to that specific site)

• Site navigation

• Events 

• Courses