The Brand Style Guide

SPINNR uses the concept of a Brand Style Guide (also sometimes referred to as the Brand Guide) for the styling (or theming) of the website.

You can access the Brand Style Guide from WordPress by going to Appearance → Brand Style Guide

Open

Quick access:

The Brand Style Guide allows you to configure the styling of the website (and by definition all of the components in the website) using the following sections:

1. Colors

2. Custom Colors

3. Typography

4. Headings

5. Buttons

6. Images

7. Cards

8. Section Themes

Colors

The Brand Style Guide includes a number of default color classes. The SPINNR default components use these classes as the definitions behind their styling.

These are:

• Primary

• Secondary

• Accent

• Light

• Dark

• Gray

• Error

• Alert

• Success

• Neutral

• White

• Black

Open

Each of these default colors can be set using HEX color values.

Custom Colors

You can also define your own additional color classes under the section Custom Colors

Typography

The website’s fonts are defined under the Typography section.

To include a font in a specific section (e..g sans) click on the text of that section and add the name of your font eclosed in quote marks into the section.

Add more fonts

To add more fonts, click the Add New button

and follow the prompts

Headings

Heading sizes and usage is configured in the Headings section

You can choose from various best practice scaling standards by clicking here:

You can then define the size, scaling method, spacing, and gap:

You can make adjustments to individual headings under the Specifics section for each heading size

Buttons

Buttons can be configured in the Buttons section. Use the drop down configurator to adjust your buttons in the way you like.

Images

The Images section allows you to configure image specific settings for typical image use cases.

Cards

The Cards section allows you to configure your preferred card style using the drop down configurator.

Section Themes

Section themes are a unique SPINNR feature that allows you to create specific theming options for sections. This allows for a powerful one-click reconfiguration of each section’s styling, saving a huge amount of time and giving you ultimate flexibility when building pages.

Configure the section themes using the configure button next to each section property.

You can add more themes by using the add button

Saving your changes

To save your changes you have two options:

1. Save & Refresh
   This saves the changes but does not apply them to the website.

2. Save & Export
   Saves all changes and exports the Brand Style Guide to the website style sheet, sending the changes to the SPINNR Canvas and available for use in your editing.

Advanced Mode

The Brand Style Guide allows for advanced editing of JavaScript and CSS directly.