Style Guide

Welcome to the Teracore style guide.

This guide will show you how we set up style guides for our clients and why we do it that way.

This guide also contains the various Elementor widgets you will be styling, so it can be used as a visual reference when you change the settings in Style Kits. It is important to note that not every single Elementor widget can be automatically styled through Style Kit, take note of the widgets that don’t play nice, these will have to be styled individually, and should be kept to a minimum.

Logo

The logo is available in 3 formats:

Use the logo version best suited to the available space.

Minimum clear space around the logo:

25% of the total logo width.

Minimum size:

Stacked:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Horizontal:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Stacked

Horizontal

Display the logo and/or icon in any colour that strongly contrasts with the background colour.

Icon

The icon is designed for use as a Favicon, social media icon or watermark.

Use the icon when the logo is to appear in perfectly square or round space of limited size (e.g. Twitter, Browser Tab, etc).

Don’t:

Alter the logo elements in any way
Apply effects or patterns to the logo
Stretch or alter the proportions of the logo

Display the logo and/or icon in any colour that strongly contrasts with the background colour.

Minimum size:

Stacked:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Horizontal:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Minimum clear space around the logo:

25% of the total logo width.

Typography

Typography expresses hierarchy and brand presence.

About

When we select fonts, our goals are to:

Easily maintain consistency across different devices and browsers, as well as other print and digital media
Make sure the font is easy to use for the clients as well as the designers
Reduce website load times
Reduce production time and costs
Avoid font clashes and issues with dynamic text whenever possible

Try stick to the default web safe fonts, system fonts or Google fonts. Every font you add, increases the complexity of your style guide, and slows your website down a bit, so use them sparingly and with purpose.

Font Styles

Here is the list of all the different typographic styles used on the website.

You can set the styles in Style Kit and check back here for a visual reference of what you have changed.

Headings provide a hierarchy for the content on your site.

Logically structure your page content using your headings.

H1 is the title of the page or post
H2 will be used for section headings
H3 will be used for section sub-headings.
H4-6 can be used for further sub-headings, or they could be used aesthetically.
Avoid skipping a level in the hierarchy, don’t go from an H1 heading to an H3 heading.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Copy

Links

Usage Example

h1 Pizza Recipe

h2 Ingredients

h3 Ingredients for the base

Body Copy

4 ½ cups flour
a pinch fine sea salt
1 packet instant yeast
½ T caster sugar
2 T extra virgin olive oil
375 ml warm water

h3 Ingredients for the toppings

h2 Instructions

h3 Preperation

h3 Cooking

Accent Colours

Accent Colors change the default style for Links, Button backgrounds, Tab and Accordion headings, and Badges.

We like to style buttons separately, so that we have more control, but everything else on the list will grab it’s default style from the accent colours.

Theme colours

Primary

#ee3d3a

Secondary

#f6121c

Extended palette

#191919

#4c4c4c

#7f7f7f

#cccccc

#333333

#666666

#b2b2b2

#e5e5e5

Accordions

Accordion Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Accordion Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tabs

Tab Heading

Links

This is a Link

Buttons

We classify our buttons based on intent.

If we want the user to take a single direct action on the page, we use the call to action button. e.g. ‘download this template’, ‘contact sales’, ‘buy this product’.

If you want the user to take some other action you should use the ‘other’ button style. e.g. ‘click here to download the spec sheet’, ‘click here to read more about x’

Call to Action

Other

Button Styles

These styles will apply to the default Elementor button widget, if you are using a different button widget please make sure you have applied the correct styling and saved it as a “global widget’.

Extra Large

Large

Medium

Small

Extra Small

Icons

Icons are useful because images can communicate an idea faster than text, they give context to your message and they can help overcome language barriers.

Consistency, as with everything, is key. When adding icons, avoid mixing and matching icons with very different styles or variations in line-thickness, and avoid mixing Line and Solid icons.

It is important that your icon matches your message. Don’t use an icon if it doesn’t enhance the message being communicated!

Line

Solid

Default

Stacked

Framed

Forms

Collecting information from users is imperative to the success of digital marketing efforts.

We use Gravity forms for all our forms.

The Gravity Form styler from Happy Add-ons is our favourite styling tool.

Here is a link to a good free alternative for sending emails: https://wpforms.com/

Remember to apply branding to the redirect pages and notification emails, too!

De-clutter: Leave lots of white space – keep it practical and clean.

Label fields clearly: Keep the field close to it’s label to avoid any confusion.

Try to keep things optional: Name, Surname and email should be the only required fields.

Test responsiveness: Ensure it’s easy to complete on any device.

Go with the flow: The design should visually guide the users – from completing details to submission!

Images

By subtly styling all your images, you can create a sense of cohesion on your website.

Applying the same filter on all your images can bring some uniformity to galleries, or maybe tinting them with your brand’s colours will help them blend in better with the style of the website, or you could apply a border radius to give your images rounded edges to spice them up a bit.

Using ‘on hover’ effects with images, can give your pages a bit of interactivity, but don’t over do it, inverting the colours or using a bounce animation on hover can be a jarring experience.

There are no strict rules but remember, the aim of setting a global style is to reduce your workload. Don’t apply a tint on all your images if you have to go and manually remove that tint from 20 logos in your client carousel.

Column Gaps

Columns gaps are a quick and easy way to apply padding across your web elements.

Sometimes you want your columns to touch edge to edge and sometimes you just want to give your elements some space.

No gap might look good on images but makes text hard to read. You can use multiple different styles, but try maintain a consistent look across your pages.

Default

Lorem ipsum dolor sit amet, consectetur shorter adipiscing elit. Ut elit tellus, luctus nec ulla mcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

No Gap

Narrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Extended

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Wider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Who wrote this?

Steve van der Walt

Steve is a WordPress developer at Teracore. You should ask him about website optimization, just don't get him started on his 'tech stack'.