Kindling Template — Style Guide
Before you begin customizing this site, check out the style guide below to see how the fonts and color palette are currently being used on the template site.
Once you change the fonts and colors in the Design Settings, they will change here.
White — used for background on some canvases. Keep white OR replace with a very light off-white if it fits your brand style.
Light Primary — used for primary background color & text on #2 (dark primary) backgrounds. Replace with your lightest neutral or brand color.
Neutral — used for some background variation. Replace with any brand color or lighter neutral.
Neutral — used for some background variation. Replace with any brand color or darker neutral.
Mid Color — used for some background variation. Replace with any mid-range brand color.
Accent color — used for subheadings & some buttons. Replace with your brand accent color.
Dark Primary — used for Heading text, paragraph text, buttons, & some backgrounds. Replace with your darkest/next darkest brand color.
Black — used for Title text, lines & outlines, dark accents against #2 (dark primary) background. Keep black OR replace with your darkest brand color.
Color palette index
the COLOR system
Note: Once you change the colors in the Design Settings, they will change here.
Paragraph — Arial
Subheading — red hat display bold
FREE Google font / Used for paragraph text
Heading - Instrument Serif Normal / Italic
Title - Instrument Serif Normal
font guide
FREE Google font / Used for page titles & Canvas headings
FREE Google font / Used for primary heading text
FREE Google font / Used for subheadings & button text
Note: Once you change the fonts in the Design Settings, they will change here.
The heading font, Instrument Serif, comes in both a regular and italic version. This template uses the italic version in the heading to highlight specific words to elevate the brand message and increase visual interest. Since the font is a Google font that is pre-loaded into Showit, this is accomplished by simply highlighting the text and clicking the "I" for italic in the text box. The same effect is used for bold highlights within the paragraph text. Simply highlight the text and click the "B" for bold.
Note: The bold/italic effect may not work with custom uploaded fonts, as the system typically recognizes them as separate font files, but it can still be accomplished using custom code.
