Style Guide

Welcome to the Verb style guide.

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

    Typography

    Typography expresses hierarchy and brand presence.

    Font Styles

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

    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

    #enter colour hexcode

    Secondary

    #enter colour hexcode​

    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.

     

    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

    Contact Us

    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

    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

    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.

    Extended

    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.

    Wide

    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.

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