Graphic Profile

Overview

This brand guideline contains the foundation of the visual profile for VO2, and includes the primary graphic components like logotype, colors, typography, iconography and imagery. It tells you how to use and communicate VO2s brand to the public, so as to keep a consistent look and feel across multiple touch points.

Logotype

Construction

VO2, volume (V) of oxygen (O2), or oxygen consumption is a measure of the volume of oxygen that is used by the body to convert energy. VO2 is the next generation holding company for the media tech industry. We acquire, invest and inject oxygen into our companies, giving them energy to accelerate profitable growth.

The logotype is simple and minimalistic yet well crafted. The letter V continues into the letter O which enhances the angle from the letter V, giving the logotype energy. The forward direction of the angle also implies speed and motion into the future.

Logotype

Color combinations

Depending on where the logo is placed, on a light or dark background, there is a need for a positive and negative version of the logo (dark and light version).

Logotype

Clearspace

It's important to maintain proper spacing around the logo to avoid overcrowding. Also, the use of whitespace keeps the brand feeling clean.

Logotype

Minimum size

When significantly reduced, the logo will become illegible. These are the pixel size units we recommend staying within to preserve quality of the logo.

Logotype

Favicon

Favicon for the web.

Favicon

Logotype

Social Media Icon

Favicon, and logomark for the web.

Large
‍100px

Medium
‍75px

Small
50px

Logotype

Avoid

For consistent use of the logotype it’s important to follow these guidelines.

Logotype

CO-branding

When co-branding VO2 with acquired, invested or partner companies, choose between one of the layouts below, side by side or vertical (a VO2 company).

The partner logotype (if allowed by their guidelines) may be converted to VO2s greyscale colors, white, semi-light and black. When converting the partner logo to grey, the “a VO2 company” text should be in grey semi-light too.

The VO2 logotype should always be in any of the three allowed brand colors, orange, dark purple and white, depending on what background it is placed on.

Logotype

Download

The logotype is stored on [DropBox]. Click on the download button below, select a file format, and follow the guidelines for consistent usage.

Download logotype

File types

SVG

Vector
Use the SVG logo for all digital purposes, if possible.

SVG files are vector-based images which allows them to be scaled while maintaining quality. They are meant for web usage.

SVGs support transparency and can be opened and edited in most design tools. Some printers accept SVG files, but generally SVGs are used online (for screens) and EPS files are used in print.

EPS

Vector
Use the EPS logo for print if you need high quality.

EPS files are vector-based images which allows the images to be scaled while maintain quality. EPS files are used in printed material.
‍
EPS supports transparency and can be opened and edited in most design tools. Some printers accept SVG files, but generally EPS files are used in print and SVGs are used online (for screens)

PNG

RAster
‍Use the PNG logo when the SVG logo can’t be used.

PNGs are constructed by a series of pixels (raster graphics). They lose quality when scaled, and can appear blurry or pixelated if scaled to a larger size than they have been saved to.
‍
PNGs are able to preserve the quality of text and lines better than JPEGs. They are also able to support transparencies. PNGs are usually larger files than JPEGs, which is why they are not usually used for saving images that are photos only.

JPG

RAster
‍Use the JPEG logo when the SVG logo can’t be used, there’s no need for a transparent background and having a small file size is critical

JPGs are constructed by a series of pixels (raster graphics). They lose quality when scaled, and can appear blurry or pixelated if scaled to a larger size than they have been saved to.
‍
JPG (or JPEG) is the most common and versatile of types of image file. They are compressed image files, resulting in a smaller file size than the original, pre-exported file.

Colors

These colors are mainly adapted for screen as VO2s profile will primarily be digital. These are vibrant colors that work as complementary colors to each other.

Primary

Light purple

HEX: #682ACD
RGB: 104, 42, 205
CMYK: 40, 64, 0, 20

Dark purple

HEX: #1D0B52
RGB: 29, 11, 82
CMYK: 21, 28, 0, 68

Purple-black

HEX: #0A002B
RGB: 10, 0, 43
CMYK: 13, 17, 0, 83

Orange

HEX: #F8571D
RGB: 248, 87, 29
CMYK: 0, 63, 86, 3

White

HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0

Usage

The colors should be used very sparingly against the white or dark grey so that they stand out and make a mark.

Gray scale

Shades of the dark grey may also be used as a background color to add variation in contrast to the white.

Light

#FAFAFA
CMYK: 0,0,0,2

Semi-light

#BCBCBF
CMYK: 0,0,0,25

Medium

#737378
CMYK: 0,0,0,53

Semi-dark

#4C4C51
CMYK: 0,0,0,68

Black

#26262C
CMYK: 0,0,0,83

Functional colors

The functional (feedback) colors should be used sparsely, primarily to indicate the state of an action, i.e. they provide feedback for the user. For example, a green success button indicates that it is the final step, or a yellow or red warning/danger message if something went wrong or didn’t work.

Success

#04C431

Warning

#FFE900

Danger

#FF1222

Info

#2BB5FF

Typography

Heading

Manrope in SemiBold, used for headlines, is an open-source modern sans-serif with geometric round shapes and sharp edges and squared dots. The contrast between the round shapes and sharp edges creates energy. Manrope is visually strong yet maintains a high readability, which is important to follow VO2s simplicity.

Manrope - SemiBold

Aa

ABCDEFGHIJKLMNOPQRSUVWXYZÅÄÖ
abcdefghijklmnopqerstuvwxyzåäö 0123456789

Body text

Manrope is also used for the body text, but in regular font weight. The contrast in thickness between the headings and the body text helps the reader segment information and guide the eye.

Manrope - regular

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqerstuvwxyzåäö
0123456789

Typography

Heading sizes

4rem - 64px

Manrope - SemiBold

Heading 1

3rem - 48px

Manrope - SemiBold

Heading 2

2rem - 32px

Manrope - SemiBold

Heading 3

1.5rem - 24px

Manrope - SemiBold

Heading 4

1.25rem - 20px

Manrope - SemiBold

Heading 5

1rem - 16px

Manrope - SemiBold

Heading 6

Typography

Body text sizes

1rem - 16px

Manrope - regular

Massa, sed nunc tempus sed amet. Tellus arcu viverra dictum pellentesque blandit etiam pharetra imperdiet.

1.25rem - 20px

Manrope - regular

Massa, sed nunc tempus sed amet. Tellus arcu viverra dictum pellentesque blandit etiam pharetra imperdiet.

0.875rem - 14px

Manrope - regular

Tiny text

1rem - 16px

Manrope - regular

Bold small text

1.25rem - 20px

Manrope - regular

Bold large text

1.25rem - 20px

Manrope - regular

Label

1rem - 16px

Manrope - regular

Link

1rem - 16px

Manrope - regular

Bullet list item
Bullet list item that spans multiple lines and still positions the checkmark at the top left of the paragraph.
Bullet list item

1.25rem - 20px

Manrope - regular

A nice quote from a testimonial.

Typography