Vitruvi Style Guide

Section 01

Colour

It is important to maintain the integrity of the color scheme set out in this guideline. Below are the primary brand colors - with correct alternative values. The primary palette should be applied in all digital communications.
A secondary set of colours has been created for the brand to complement the primary colour scheme and reflect the brand values. The secondary palette can also be used to create unique additions to the primary brand colour palette. Percentage tints can be set up from any of these colours.

Primary
Colour Palette

Vitruvi Aegean Blue

HEX           : #334B5C
CMYK        : 45, 14, 0, 76
Pantone   : 4161C
RGB           : 51, 75, 92

Vitruvi Light Blue

HEX           : #7CA0B6
CMYK        : 53, 21, 12, 3
Pantone   : 2206C
RGB           : 124, 160, 182

Vitruvi Yellow

HEX           : #E8BC28
CMYK        : 2, 25, 96, 0
Pantone   : 7408C
RGB           : 232, 188, 40

Secondary
Colour Palette

Vitruvi Teal

HEX           : #11333D
CMYK        : 100, 66, 55, 56
Pantone   : 547C
RGB           : 17, 51, 61

Vitruvi Slate Blue

HEX           : #517992
CMYK        : 69, 37, 19, 16
Pantone   : 5405C
RGB           : 81, 121, 146

Vitruvi Silver Blue

HEX           : #E8EDF3
CMYK        : 5, 2, 0, 5
Pantone   : 656C
RGB           : 232, 237, 243

Vitruvi Grey

HEX           : #55585A
CMYK        : 63, 51, 49, 35
Pantone   : 425C
RGB           : 85, 88, 90

Special
Colour Palette

HEX : #517992
HEX : #658CA3
HEX : #7CA0B6
HEX : #6598AF
HEX : #5292A8
HEX : #3C8AA1

Colour Usage

Vitruvi Aegean Blue: This colour is one of the primary brand colours. It is used in the most headings / titles, image overlays and as a background colour.
Vitruvi Light Blue: This colour is commonly used for heading divider graphics, infographics and background colours. It is often used in conjunction with Vitruvi Yellow for infographic purposes and charts,as well as headings.
Vitruvi Yellow:  This colour appears in the logo and should be used for accent elements  - for example a part of an icon, parts of a photo, on infographics, parts of buttons, etc.
Vitruvi Teal:  This colour is reserved for the logo, and for texts on yellow background; it’s also used for texts of buttons in active state.
Vitruvi Slate Blue: Supplemental color for backgrounds and buttons
Vitruvi Silver Blue:  This colour is used for background section colours to bring separation to a page.
Vitruvi Grey:  This colour is used for body copy text colour only.
White: This colour is used for background section colours to bring separation to a page, as well as for text color when the copy is on a dark background.
Special Colour Palette: These colors are used for subtle differentiation of backgrounds of elements that are side-by-side, e.g. table column headers.

Section 02

Corporate Typography

A standardized font system has been established for all brand communications.
Wherever possible, the primary typeface should be chosen for all digital communications. For instances where the primary typeface is not suitable for use, i.e. email templates etc, the alternative typefaces are a suitable option and should be available to all users as a standard system font.  The typeface families can be utilized in their various weights. Please refer to the following section for styling.

Primary Font

Aa

Heebo Black

Black

Aa

Heebo Bold

Bold

Aa

Heebo Regular

Regular

Aa

Heebo Light

Light

Body Copy text

Character Styles

To ensure consistency across all digital communications, the following typographic hierarchy has been developed. Certain exceptions may apply on a case by case basis (i.e. Infographics, single occurrence/specialty sections). Please consult your brand manager for details.

H1 Heading

Weight       : Black
Font Size    : 80pt
Leading      : 90pt
Kerning      : 25
Case            : Title Case
Family Font : Heebo
HEX : #334B5C / #FFFFFF
Use : Titles of pages
HTML Tag / Class : H1

H1 Heading

H1 Heading Alternative

Weight       : Black
Font Size    : 60pt
Leading      : 66pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : 7CA0B6 & #FFFFFF
Use : Homepage title
HTML Tag / Class :H1.H1_home

H1 heading style
alternative

H2 Heading

Weight       : Black
Font Size    : 32pt
Leading      : 40pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #334B5C / #FFFFFF
Use : Titles of sections
HTML Tag / Class : H2

H2 heading style

H3 Heading

Weight       : Light
Font Size    : 32pt
Leading      : 40pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #7CA0B6
Use : Crossheading, blockquote,
HTML Tag / Class : H3

H3 heading style

H4 Heading

Weight       : Bold
Font Size    : 20pt
Leading      : 28pt
Kerning      : 25
Case            : Title Case
Family Font : Heebo
HEX : #334B5C / #FFFFFF
Use : Titles of small
paragraphs,  etc.
HTML Tag / Class : H4

H4 Heading Style

H5 Heading

Weight       : Bold
Font Size    : 16pt
Leading      : 20pt
Kerning      : 25
Case            : Title Case
Family Font : Heebo
HEX : #334B5C / #FFFFFF
Use : The smallest titles,
texts of buttons
HTML Tag / Class : H5
H5 Heading Style

H2’s Subheading

Weight       : Regular
Font Size    : 14pt
Leading      : 24pt
Kerning      : 300
Case            : Upper Case
Family Font : Heebo
HEX : #7CA0B6
Use : Accompanies all
the H2 Headings
HTML Tag / Class : .H2_subt

H2’S SUBHeading Style

Body Text

Weight       : Regular
Font Size    : 16pt
Leading      : 28pt
Kerning      : -10
Case            : Sentence
Family Font : Montserrat
HEX : #55585A / #FFFFFF
Use : Regular
HTML Tag / Class : p

Body text style would appear like this.

Body Text Small

Weight       : Regular
Font Size    : 14pt
Leading      : 24pt
Kerning      : -10
Case            : Sentence
Family Font : Montserrat
HEX : #55585A / #FFFFFF
Use : If space is limited,
usually after H4 or H5
HTML Tag / Class : .p_small

Body text style would appear like this.

Body Text Bold

Weight       : Bold
Font Size    : 20pt
Leading      : 32pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #334B5C / #FFFFFF
Use : CTA or if  an emphasis
is needed
HTML Tag / Class : .p_bold

Body text style would appear like this.

Unordered List

Weight       : Bold
Font Size    : 20pt
Leading      : 28pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #334B5C
Use : A list
HTML Tag / Class : ul
Bulleted list style would appear like this.

CTA Text Big

Weight       : Black
Font Size    : 80pt
Leading      : 90pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #FFFFFF
Use : CTA
HTML Tag / Class : .CTA
CTA text big

CTA Text Small

Weight       : Black
Font Size    : 32pt
Leading      : 40pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #FFFFFF
Use : CTA
HTML Tag / Class : CTA_small
CTA text big

Link Style

Weight       : Regular
Font Size    : 16pt
Leading      : 28pt
Kerning      : -10
Case            : Sentence
Family Font : Montserrat
HEX : #334B5C
Use : Inline links
HTML Tag / Class : a

Footer H1 Style

Weight       : Light
Font Size    : 32pt
Leading      : 40pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #334B5C
Use : Footer - Address
HTML Tag / Class : .footer_H1

Footer H1 heading style

Footer H2 Style

Weight       : Bold
Font Size    : 16pt
Leading      : 20pt
Kerning      : 25
Case            : Title Case
Family Font : Heebo
HEX : #334B5C
Use : Footer - Main
categories of links
HTML Tag / Class : .footer_H2

Footer H3 Style

Weight       : Bold
Font Size    : 14pt
Leading      : 24pt
Kerning      : -10
Case            : Title Case
Family Font : Montserrat
HEX : #334B5C
Use : Footer - Subcategories
of links
HTML Tag / Class : .footer_H3

Footer Body Text

Weight       : Regular
Font Size    : 14pt
Leading      : 18pt
Kerning      : -10
Case            : Title Case
Family Font : Montserrat
HEX : #55585A
Use : Footer - Links
HTML Tag / Class :.footer_p

Footer Body Text Bold

Weight       : Bold
Font Size    : 15pt
Leading      : 20pt
Kerning      : 25
Case            : Sentence
Family Font : Heebo
HEX : #334B5C
Use : Footer - Contact details
HTML Tag / Class :.footer_p_bold

Footer Copyright Text

Weight       : Regular
Font Size    : 16pt
Leading      : 28pt
Kerning      : -10
Case            : Title Case
Family Font : Montserrat
RGBA : 232 237 243 0.5
Use : Footer - Copyright
HTML Tag / Class : .footer_copyrights

Section 03

Buttons

For all digital applications, we have created set styles and sizes. Please see details below for all button variations. Important: If there are two buttons one over another, both should have the width of the wider button.

Button Styles

Button 01

Size : x 30px, h 48px
HEX  : #7CA0B6
Hover HEX  : #E8BC28  
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #11333D
Special Effects  :  Drop Shadow, Normal, #344B5C, 39% opacity,
90 angle, Distance: 12px, Spead: 3%, Size: 43px
Normal State
Request a Demo
Hover State

Button 02

Size  : x 30px, h 48px
HEX  : #517992
Hover HEX  : #E8BC28  
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #11333D
Special Effects for Hover State  :  Drop Shadow, Normal, #344B5C,
39% opacity, 90 angle, Distance: 12px, Spead: 3%, Size: 43px
Normal State
Start Here
Hover State

Button 03

Size  : x 30px, h 48px
HEX  : #517992
Hover HEX  : #FFFFFF
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #517992
Special Effects  :  Drop Shadow, Normal, #344B5C, 39% opacity,
90 angle, Distance: 12px, Spead: 3%, Size: 43px
Normal State
How it Works
Hover State

Menu Button
Styles

Button Menu 01

Size  : x 22px, h 35px
HEX  : #517992
Hover HEX  : #334B5C
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF
Normal State
Support
Hover State

Button Menu 02

Size  : x 22px, h 35px
HEX  : #7CA0B6
Hover HEX  : #E8BC28  
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #11333D
Normal State
Demo
Hover State

App Button
Styles

Button App 01

Size  : h 42px
HEX  : #344B5C
Hover HEX  : #E8BC28
HTML Tag / Class  :
Comment :  Use asset from the
Smart Object of the button
Normal State
Hover State

Button App 02

Size  : h 51px
HEX  : #344B5C on #FFFFFF
Hover HEX  : #11333D on #E8BC28
HTML Tag / Class  :
Comment :  Use asset from the
Smart Object of the button
Normal State
Hover State

Tab Styles

Categories Features

Size  : w 213px, h 69px
HEX  : Special Color Palette
Hover HEX  : #FFFFFF
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #344B5C
Special Effects for Hover State  :  Drop Shadow, Normal, #344B5C,
35% opacity, 90 angle, Distance: 24px, Spead: 15%, Size: 49px
Normal State
Hover State

Categories How it Works

Size  : w 229px, h 69px
HEX  : #7CA0B6
Hover HEX  : #FFFFFF
HTML Tag / Class  :
Family Font : Heebo
Font Size : 16pt
Font Weight  : Bold
Font Colour  : #FFFFFF / #344B5C
Special Effects for Hover State  :  Drop Shadow, Normal, #344B5C,
35% opacity, 90 angle, Distance: 24px, Spead: 15%, Size: 49px
Normal State
Hover State

Section 04

Additional
Elements

A set look and feel has been established for all digital iconography and decorative elements for use within our brand. Please refer to elements below for reference.

Lines

Line 01 (Underline of H1 Titles)

Size : w = title’s width, h 8px
HEX  : #E8BC28
HTML Tag / Class  :

Line 02 (Bottom of Photos & CTA Box Bg)

Size : w = width of a photo / bg, h 6px
HEX  : #E8BC28
HTML Tag / Class  :

Line 03 Separator

Size : w 5px, h = 10px + paragraph’s height + 10 px
HEX  : #E8BC28
HTML Tag / Class  :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim non magna dignissim dictum. Cras consequat quis libero nec rutrum. Donec sem lacus, accumsan sed quam quis, aliquam laoreet arcu. Maecenas ut elit nec ligula facilisis dictum et a enim.

Special Backgrounds

Background Lines

Use attached pattern as a css background
with horizontal and vertical repeat

Gradient Background With Noise

Gradient background with noise for special uses;
inside of the attached smart object there is a full-res
(unmasked) background image.

Iconography

Examples of icons on a bright background

HEX  : #7CA0B6 / #E8BC28
Production
Reporting
Project
Financials
Project
Schedules
Escalations
& Ticketing
Time
Keeping
Invoice
Management
Permit
Management
Quality
Assurance
Redlines
and  As-Builts
Materials
Management
Program
Tracking
Safety
Document
Management
Resource
Planning
Productivity
Analysis
Equipment
Utilization

Examples of icons on a dark background

HEX  : #FFFFFF
Reporting
Cost
Schedule
Quality

Examples of icons inside of boxes with a dark background

HEX  : #FFFFFF / #E8BC28
A brilliant product
Visionary clients
A rewarding career
A connected culture

Examples of icons on yellow background

HEX  : #FFFFFF / #11333D
Customer Resources
Partner Resources

Download

Here you can download all additional elements. These were intended for internal use only and should not be distributed and/or sold, or used for external purposes.

Photography

Here you can find examples of photo treatments with PSD reference files. Click on a thumbnail of a photo to download its PSD. For any questions on photography style or use, please consult your approved brand manager.

Photo Type 01

Monochromatic blue tint,
yellow elements of work clothing and equipment,
natural colors of human skin and hair

Photo Type 02

Monochromatic blue tint,
natural colors of human skin and hair

Photo Type 03

Monochromatic blue tint

Download

Here you can find the digital library that has been established for all photography currently used within our brand. Photos are for internal use only and should not be distributed, sold, or used for external purposes.

These guidelines are the brands digital blueprint and contains all components that defines who we are, and set us apart from our competition. By honouring these guidelines, you’ll ensure that our brand maintains a consistent style. If there are any additional questions about usage that were not covered in these guidelines, please contact an approved brand manager.