Crisalix Brand Guidelines

In this section you will find an overview of logo use, color palette, typography and design elements for the Crisalix brand. Please follow these style guidelines when producing content for Crisalix. As brand ambassadors, it’s our responsibility to ensure we are aligned in the way we communicate Crisalix and our products.


Logos

Crisalix logos are available as a full color logo (CMYK and RGB) for use on lighter backgrounds. For use on darker backgrounds, a version with white logotype is available, however ensure the background is dark enough to create contrast and ensure visbility. The recommended colors for darker backgrounds are #023444 , #000A0E and #222222 .

The relative proportions of each logo must not be changed in any way. Ensure that there is sufficient clear space between the Crisalix logo and other graphical or textual elements for them to be interpreted as unique elements (See example with clear space indications). An exception to this rule is when "Powered by" is added above or by the side of the logo. The logo should be present on all pages of marketing material.

Clear space

 

Minimum size

Download logos

Typography

Crisalix uses Mulish as its main font family. Mulish is a versatile and minimalist Sans Serif typeface, designed for both display and text typography. Thanks to its spacing and variety of weights it is suitable for web and mobile applications. Montserrat can be used for bold headlines to add emphasis and for numbers.

To optimise readibility the following should be applied:

  • The leading (line-height) as a rule of thumb should be set at approximately 150% of the font size to create a spaced modern feel. As the font size increases the leading should increase and vice versa.
  • The maximum width of body text should be between 65 and 75 characters.
  • When displaying headlines in UPPERCASE, the tracking (letter space) should be increased slightly.
  • Use font weights to emphasize or differentiate content hierarchy.
  • Use 700 - bold for bold words within body text.

Mulish Weights:

400 - Regular

600 - Semi bold

700- Bold

800 - Extra bold

Montserrat Weights:

400 - Regular

600 - Semi bold

700 - Bold

Download Mulish Download Montserrat

Design elements

Use geometrical shapes to draw attention to and decorate images and text.

Examples:


Colors

The brands palette includes three shades of blue derived from the Crisalix logo for brand recognition. They should be used for highlights (making up 10-20%) to bring attention to key actions within the design, e.g. buttons, stats. For lighter backgrounds grey-7 has been defined as the main text color and grey-8 for headlines on white backgrounds. For grey backgrounds use grey.

Use tertiary and grey as backgrounds to create contrast between the background and text, lighter images or other graphical elements.

On white backgrounds use grey-7 for body text and grey-8 for headlines.

Brand

Primary #137191
Secondary #40a1c7
Tertiary #023444
black-brand #000A0E
Green #0EA8A6
Red #A32641
grey #EBEFF0

Greyscale

grey-1 #fcfcfc
grey-2 #fafafa
grey-3 #f5f5f5
grey-4 #f3f3f3
grey-5 #eeeeee
grey-6 #dddddd
grey-7 #555555
grey-8 #222222

Examples:

Crisalix Logo
Crisalix Logo

Trademarks

When developing applications in collaboration with third parties that integrate Crisalix products, these products must include the trademark "Powered by Crisalix".

Imagery

To showcase Crisalix products, mockups or screenshots should be shown in the latest Apple devices.

When showing 3D images, all or parts of the UI can be removed to avoid cluttered looking imagery. 3D images should be of good quality and with good lighting. 3Ds created from photos taken under fluorescent lighting must be color corrected adjusting white and color balance.

Examples:

Crisalix Logo
Crisalix Logo