Logo

Colours

Typography

Design elements

Icons

Extended Design Assets

Layout examples

quantum-women-holding-book-mockup

Quantum

Digital Brand Platform


Version 1.1 – 2023

Welcome to the Digital Brand Platform for the Quantum brand. Here you can learn all about the Quantum brand identity, access all design files and get inspiration for integrating the brand into your day-to-day work. 

Logo

Our logo defines us and what we stand for. When we use it correctly, people will recognise us from afar. To maintain recognition we must follow the guidelines below when using it.

Main logo

quantumlogolarge

Dark logo


quantumlogodarklarge

Always maintain adequate spacing around your logo to allow it to breathe.

Logo icon

The "Big Q" is our logo icon. It is bold, unique and easily recognisable. It does not replace the use of our full logo but can be used as a complementary design element.”

Main icon

quantumlogoicon

Cobalt icon

quantumlogomidnighticon

Midnight icon

Secondary icons

quantumlogowhiteoncobalticon

White icon on cobalt

quantumlogowhiteonmidnighticon

White icon on midnight

The black icon and greyscale icon should be used sparingly.

quantumlogoblackicon

Black icon

quantumlogowatermarkicon

Greyscale icon

Example of large logo icon placement 

(hover over image to see alternate option)

quantum_iconusage quantum_iconusage2

Logo usage

When we use our logo correctly we enhance our brand recognition 

and maintain consistency.

quantumidentitylogorules
Download all logos

Colours

Our colours represent our brand. They are bold, refined and crisp. They give us versatility when used correctly.

Primary colour palette

Cobalt

  • HEX #2b17ff

  • RGB 43, 23, 255

  • CMYK 100, 98, 1, 0

Midnight

  • HEX #01013f

  • RGB 1, 1, 63

  • CMYK 100, 95, 32, 55

White

  • HEX #FFFFFF

  • RGB 255, 255, 255

  • CMYK 0, 0, 0, 0

Secondary colour palette

Our secondary colour palette is made up of neutral colours for typography, section breaks and backgrounds. You can use shades of these colours to add depth and contrast.

Blackberry

  • HEX #2b1925

  • RGB 43, 25, 37

  • CMYK 67, 78, 57, 71

Pebble

  • HEX #e6e6e6

  • RGB 230, 230, 230

  • CMYK 8, 6, 7, 0

Shale

  • HEX #6c666b

  • RGB 108, 102, 107

  • CMYK 58, 54, 47, 18

Quantum gradient

quantum_gradient

Typography

Our typefaces show our brand personality. Use headers and body text with the correct fonts and right colours in order to maintain brand consistency across all materials.

MAIN

Gilroy Extra Bold

Case: Sentence case for headers, lowercase for buttons


Typical colours: 

→ Blackberry

→ Cobalt (special headings on white)

→ White (on midnight)


Used for headers and buttons


ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz


0123456789

Roboto Regular


Case: Sentence case typically, lowercase for links


Typical colours: 

→ Blackberry

→ White (on midnight, sparingly on cobalt)

→ Cobalt (link with arrow)

Used for all body text and links


ABCDEFGHIJKLMNOPQRSTUVWXYZ


abcdefghijklmnopqrstuvwxyz


Roboto Light


Case: Sentence case typically.


Typical colours: 

→ Blackberry

→ White (on midnight, sparingly on cobalt)

Used for big ideas and minor headings. 

This should be used sparingly. 


ABCDEFGHIJKLMNOPQRSTUVWXYZ


abcdefghijklmnopqrstuvwxyz


Typography examples


Gilroy is used for big heading


Roboto regular is used for the body text

quantum_typographylayout1

Gilroy is used for section heading


Roboto light is used for minor headings


Roboto regular is used for the body text and link

quantum_typographylayout_2
Download all fonts

Design elements

Our visual language is made up of several design elements: thin lines, blocks of colour, patterns and iconography. We also use textural images in black and white or with colour overlays. 

Thin lines

quantumalllines

Colour blocks

Hover over image to view more


These colour blocks are most effective when used sparingly and complemented by a neutral palette. 


The best combinations are the Quantum gradient or cobalt with pebble or midnight.

quantum_colourblock quantum_layout

Pattern

Hover over image to view more


Our pattern is a great background element for print or web.

patterncobalt patternmidnight

Textural images

We use texture as a background element for big graphical pieces. 

We use colour overlays using our colour palette. 

The textures should not be too busy or distract from our messaging. 

Texture examples

Hover to see more

quantum_textureexample_3 quantum_textureexample2
Download design elements

Icons

quantumiconspreview
Download all icons

Extended design collateral

Presentation design

screenshot-2023-04-03-at-144818

Business card design

quantum_businesscardsjune

Email signature design

quantumemailpreview

Letterhead design

quantumletterheadv2
Download design collateral

Layout examples

quantumpostersjune
Download posters 1
Download posters 2
laptop-back-cover-mockup
quantum_weblayout3
quantum_lineslayout1
quantum_weblayout2
Download moodboard
Download layouts

Brandlucent © 2023