Base Kit

Font Settings

Font Pairings

We have included a list of font pairings that you can use. The list represents the fonts to be used on the Headings and Body. All Kit sections will uses these fonts for the headings and body portions of the sections that are on the same page.

Using Custom Fonts

To use custom fonts or Google fonts you essentially need to provide an "embed script" that will reference the font families to be used. If you have purchased a font from a front provider, then be sure you have a "web license" for that font and that your font provider can give you an embed script to be used on a website.

• Choose "Custom" as the Font Pairings Setting

• Paste your font embed script into the Embed Script setting

• Specify the font family name (comma separated) in each of the settings for heading, Subheading, Body and Button

How to use non Google Custom Fonts (covered in the video above): 1) Get your Webfont kit from a font provider (or convert your desktop fonts using FontSquirrel 2) Upload your Webfont files (WOFF/WOFF2, etc) to a "dummy course, download lesson so you can grab a url to those files) 3) Add the snippet to Base Kit section using the url to those font files 4) Use the font's inside of Sections Kit as well as how to use the font inside of Thinkific sections

Using Thinkific's Theme Fonts:

In this case, we will use the Theme Settings to "load" the font scripts. Then will be use the above method for Custom Fonts, but only having to specify the font family name in the Base Kit settings.

Named Colors

Many times a brand consists of more the 2 colors being used. So we have provided an easy way for you to specify up to 5 colors. You do not need to use all of these if you do not want to, but in subsequent Kit sections where you are specifying a color for an item on the page (ex: heading color), you can choose "Color 1" and it will use the color that the base kit has specified for "Color 1". Then this way if you ever need to change your color scheme, you can change it in one place. Also this helps by not having to remember and enter your color codes each time. Another side benefit of this approach, is that it allows you to alter the color scheme being used on a specific page without effecting the entire site.

How to use named colors

• Add Base Kit section to a page and open up the Solid Colors settings group

• Enter your brand colors for Color 1 to Color 5 - These will be used in Kit sections

• Within another Kit section that you have added to the page, you will be able to select one of the names colors to use: ex Color 1

• Base Kit also provides a way for you to specify a brand gradient color as well. This gradient color can be used as background colors, text colors or highlighting words using Smart Style

Buttons

Base Kit includes settings to control the style of your buttons. These settings will control the style of the buttons that are include with a Kit PowerUp only.

• When the "Use Thinkific Primary Button Color" is checked, then the color of the Kit buttons will be the same as the ones you have setup inside your Thinkific theme settings

• When it is not checked then you can specify the colors to be used for primary and secondary colors.

• Additionally you can control the amount of border radius used for the Kit buttons. Moving the slider to the left will result in square corners. Moving the slider to the right, will result in rounded corners.

• Inside of Kit sections that use Buttons, you can then specify the type of button to be used.