Icons and illustrations/ Guidelines / Design system CROC

Icons and illustrations

CROC’s icons and illustrations are visual symbols that represent concepts and storylines which help users navigate through experiences and ideas intuitively and effortlessly. They can communicate messages quickly, inspire interactivity, and simplify complex ideas.

Use icons to improve usability or to signify accessibility. Illustrations make a bold visual statement and you can use them to create impact when the main goal is visual storytelling.

It is important to reduce cognitive load on users by employing visuals moderately and strategically throughout your designs. Use common metaphors that everyone around the world can quickly recognize.

Icons

CROC icons have a linear and minimalist design. Icon style features are fine, with a constant contour thickness and the avoidance of filled-in blocks.

Smooth arches and corners are visual qualities shared with pattern design and logotype.

Green icons White icons

Color and style

Always maintain a proper amount of clear space around an icon. In digital space icons can be animated or transform into a different icon to signal a certain relationship. One icon should not look heavier or lighter than other icons of the same size. There should be no different weights within one icon. Always keep a good balance of size ratio, alignment, and spacing.

Color and gradients can bring dimension and vitality to icons. More often the basic color palette is used. For accents, we suggest using secondary colors. Inversion is allowed. In rare cases and for large size icons you can apply brand gradient. Smaller icons should use only one color, however you can play around with large-scale icons and paint them with gradients.

Illustration

The illustration style of CROC is used to provide supporting visuals to services, solutions and other abstract matters. It follows the principles of simplicity and takes inspiration from the openness and dynamism of the brand. Illustrations are a visually and emotionally powerful tool. Сarefully identify the right situations for them. Avoid using an illustration only as a decorative element, it may lose its storytelling power.

Text can complement illustrations but must not be used as an element of the graphic. Illustrations can be used in a variety of image sizes. CROC illustrations are created for certain contexts and purposes and should not be combined with other graphics. Please check with our Creative lab team to get direction on proper usage.

Simplified style

Illustrations style follows three main principles:

1. Using white as the primary color to create the background, and the line in combination with a flat shape to create a pattern.
2. Use of color accents on technology related items.
3. Visualization of ideas through metaphor.

Principles of design

Using the base grid to build illustrations. The base grid consists of elements that are consistent with the letters of the CROC logotype:

– circle and its fragments

– vertical

– horizontal

– diagonal

Sophisticated style

Illustrations style follows these principles:

– Use white as the main color to create the background. Line and simple shapes with the colors of the brand, to build a picture.

– Use a brand gradient to focus on technology-related elements. The use of texture for the voiced sound of illustrations.

– Visualization of ideas through a metaphor.

– Technology as the basis for creating the future. For this, the dimensions of technological elements are hyperbolized compared to the size of a person.