Brand Guidelines.

Welcome to our hub for the brand standards and guidelines of TFEvent.co.

To help shape our events and touch points to these values and style, please follow these graphic standards closely.

Manifesto

This is the statement that you should refer to whenever creating new documents, emails, communications, events, or any kind of anything to do with TFEvent.co. It's our guiding light for who we are.

Professional but not too serious.

We are site operations experts

who provide custom event solutions designed with intention

to independent producers with fresh ideas

and established events looking to tighten up their game

in Vancouver and surrounding municipalities
to build

to build a strong event foundation

with our collective, intuitive relationships.

Logos

Logos! Download them, use them where you use logos.
You know the rules, no putting it upside down, stretching it, or doing anything else funky.

TFEvent.co Stacked Black

Transparent PNG

TFEvent.co Stacked White

Transparent PNG

TFEvent.co Stacked Jelly Bean

Transparent PNG

TFEvent.co Stacked Cerulean Blue

Transparent PNG

TFEvent.co HZ Black

Transparent PNG

TFEvent.co HZ White

Transparent PNG

TFEvent.co HZ Jelly Bean

Transparent PNG

TFEvent.co HZ Cerulean Blue

Transparent PNG

TFEvent.co Wordmark Black

Transparent PNG

TFEvent.co Wordmark White

Transparent PNG

TFEvent.co Wordmark Jelly Bean

Transparent PNG

TFEvent.co Wordmark Cerulean Blue

Transparent PNG

Colour Palette

These four colours are our core brand colours and should be used in most situations.

Slate Grey

#333333

Cerulean Blue

#3c61ad

Jelly Bean

#db5248

Columbia Blue

#d0dde3

These four colours are our secondary brand colours and should be used as accents.

Vivid Green

#01c10d

Pacific Blue

#03abc5

Light Orchid

#dca4c9

Dark Tangerine

#f4ac00

Typography

TFEvent.co follows a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Headings & Large Text

Multi Display Extra Bold is the main headline font for TFEvent.co and should be used in all title cases.

Note: the logo is a modified typeface based on Multi Display but should never be replicated using the font.

Site Operations Experts

H1 - 50px

Site Operations Experts

H2 - 38px

Site Operations Experts

H3 - 32px

Site Operations Experts

H4 - 20px

Site Operations Experts

H5 - 17px

Site Operations Experts

H6 - 15px

Paragraphs

Gira Sans Regular is the standard typeface for TFEvent.co on the web and print for paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph XL - 24PX / 1.4

Paragraph Large - 19PX / 1.4

Paragraph Large - 16PX / 1.4

Paragraph Small - 14PX / 1.4

Site Operations Experts

Detail note - 10PX / 1.4

Photography

In order to set a specific photographic style, all TFEvent.co photos should be shown with a halftone effect. There a couple of different ways to achieve this effect: Photoshop or CSS.

Halftone Pure CSS

Displaying images in halftone through CSS is fairly simple. The halftone effect we use is simply a CSS-generated overlay with the image placed as the background of a container. Rather than completely strip the photo of all colour, this allows us to add TFEvent.co colours to images while retaining their original vibrancy.

.halftone-example {
        background: url('path/to/background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;

.halftone-example:after {
        background-image: linear-gradient(45deg, #3c61ad 25%, transparent 25%), 
        linear-gradient(-45deg, #3c61ad 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #3c61ad 75%), 
        linear-gradient(-45deg, transparent 75%, #3c61ad 75%);
        background-size: 2px 2px;
        background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
        padding-top: 62.5%; /* This percentage makes a 16:10 ratio */
        display: block;
        content: '';
}

Note: In order to change the overlay colour, adjust the highlight colours to another one of the TFEvent.co brand colours.

Result:

Halftone Overlay

The other option for halftone images is a single-colour halftone overlay. There are many ways to achieve this effect. You can use an online generator or Photoshop — just make sure you always achieve this visual outcome:

Contact Info

If you have any questions, please send an email to inquiries@tfevent.co