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

    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
    T Logo Stacked
    Horizontal
    T Logo Black Inverted Large
    Inverted on black
    T Stacked logo Inverted white on red
    Inverted on red

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

    Icon
    T Red Icon No BG

    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

     

    T Logo Black Inverted Large
    Inverted on black
    T Stacked logo Inverted white on red
    Inverted on red

    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

    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

    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.

    T Social Media Icons x 3

    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

    Test Form

    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.

    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 with glass, 3d modeling

    No Gap

    robot, crazy, steampunk
    lego, wall-e, figure

    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

    Teracore - Uncategorized - 36

    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, toy, grey

    Extended

    lego, wall-e, figure

    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.

    Teracore - Uncategorized - 134

    Wide

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

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

    Teracore - Uncategorized - 133

    Wider

    Teracore - Uncategorized - 135

    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. 

    robot, hug, steampunk

    Who wrote this?

    Scroll to Top