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.
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.
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.
400 - Regular
600 - Semi bold
800 - Extra bold
400 - Regular
600 - Semi bold
700 - Bold
Use geometrical shapes to draw attention to and decorate images and text.
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.
When developing applications in collaboration with third parties that integrate Crisalix products, these products must include the trademark "Powered by Crisalix".
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.