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.

Table of Contents
    Add a header to begin generating the table of contents

    Typography

    Typography expresses hierarchy and brand presence.

    About

     

    When we select fonts for a brand, 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

    The font we select will show up in a bunch of different places, the two big categories are Print and Digital.

    Each application of the font has it’s own set of challenges. 

     

    Print

    You have to think about where the font is going to be used, on business cards, in a brochure, on a billboard, on a T-shirt, on the side of a truck? Will it be a lithographic or digital print? What does the font look like with different finishes? How accessible is the font, i.e. will other designers be able to get a hold of the font quickly?

     

    Digital

    The problems revolve around users not having your brand’s custom font installed.   

    Will the user be required to install a custom font so that your PowerPoint presentation layout doesn’t break? 

    Will your website look like a hot mess if a visitor has an ad-blocker preventing google fonts from loading?

    To minimize risks and ensure consistency we recommend the use system fonts:
    Arial
    Tahoma
    Helvetica
    Trebuchet MS
    Verdana
    Georgia
    Times New Roman

    It might seem cruel, maybe even masochistic, limiting yourself to only these fonts, but a style guide is only useful if it is actually being implemented consistently across the brand. Sticking to a system font increases the likelihood of this happening.

    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!

     

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Body Copy

    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 LinksButton backgroundsTab 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

    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. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Tabs

    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. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Links

    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

    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

    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

    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

    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.

     

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

     

     

    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.

    Line

    Solid

    Default

    Stacked

    Framed

    Forms

    Test Form

    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.

     

    Chat bot robot welcomes android robotic character. Creative design toys on yellow background

    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

    Robot chef preparing meal frying pan, electronic stove oven.

    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.

    Robot chef preparing meal frying pan, electronic stove oven.

    No Gap

    Robot chef preparing meal frying pan, electronic stove oven.

    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.

    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.

    Narrow

    Robot chef preparing meal frying pan, electronic stove oven.

    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. 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.

    Robot chef preparing meal frying pan, electronic stove oven.

    Extended

    Robot chef preparing meal frying pan, electronic stove oven.

    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. 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.

    Robot chef preparing meal frying pan, electronic stove oven.

    Wide

    Robot chef preparing meal frying pan, electronic stove oven.

    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. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Robot chef preparing meal frying pan, electronic stove oven.

    Wider

    Robot chef preparing meal frying pan, electronic stove oven.

    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. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Robot chef preparing meal frying pan, electronic stove oven.

    Who wrote this?

    Scroll to Top