Visual styleguide
Our goal is to create and maintain a clear, versatile and consistent brand vocabulary that communicates trust and scientific leadership to our customers.
This resource will serve as a guideline for all visual communications.
Our logo
The horizontal logo is the primary treatment. Always try to leave enough white space around the logo.
Guideline: Imagine the Q mark reduced to 50% size, and use that as a measure to approximate the padding around the logo.
The logos come in a zip file in the following formats:
- EPS for print
- JPG for web
- SVG for web
- PNG for web
Horizontal
Vertical
Horizontal reverse
Vertical reverse
Color palette
These are our primary & secondary brand colors.
These colors are only a guideline and are not meant to be prescriptive.
PRIMARY COLORS
#C0272D
#404041
ACCENT COLORS
#0F497B
#319581
#304159
SECONDARY COLORS
#7A9D9E
#A4B494
#63A4BB
#F7F4F2
GRAYSCALES
#4D4D4D
#707070
#B3B1B3
#F2F2F2
GRADIENT
Fonts
Always maintain a consistent hierarchy with generous leading.
Primary font, digital & print
Montserrat Regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 @ # ! < >.
Montserrat Bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 @ # ! < >.
Secondary display font
Source Sans Pro Light
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 @ # ! < >.
Source Sans Pro Black
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 @ # ! < >.
Photography
Appropriate imagery is vibrant, high quality and primarily supports the content around it.
Resources: Unsplash.com | Pexels.com | iStockphoto.com
Iconography
Icons are used to punctuate a concept or an interaction. They also provide additional meaning to a headline or a button. Strive to use the simplest illustration possible in a line style. For legibility of smaller icons, like in a button, use a very simple or a solid icon.
Resources: Flaticon | Fontawesome | Vecteezy
Design guidelines
Prominent branding. Bright, visually attractive and meaningful imagery. A clear hierarchy of information. Simple layouts that feature the content first.
These are the design guidelines at the heart of our landing pages, digital resources, and printed materials.
Application note template
Colorful imagery. Clear branding.
Single column layout.
Callout charts & illustrations.
Clear call to action to finish.
