30 Matrix System & Structure

Matrix collection of illustrations shares the perspective, light source & palette.

An icon’s primary job is to be clear and intelligible. Each icon is designed with the highest priority (Legibility-focused aesthetic).

Each icon weight is designed according to a specific grid system—which in turn creates a consistent aesthetic (Precise pixel grid).

Matrix Systems & Structure

The key concept that defines the illustraStock Matrix Collection is a system-based design approach to the structure of the illustrations. The illustraStock Matrix Collection is based on 5 guiding principles that all illustrations share (Perspective, Padding, Object fill vs. Stroke, Color palette and Sizes):


Matrix collection of illustrations uses the orthographic projection (orthogonal projection). Projection with 2 views of an object (as a view of the Front and Side) onto a drawing surface in which the lines of projection are perpendicular to the drawing surface.

In order to standarise the creation process, the creation of one illustration would be by drawing at 400% of illustartion scale.

We will check the illustration if looks good at 66,66% and 200%.


Elements should all have their own padding or margins – or white space inside or between them. We need at least 1px (2px recommended) between two lines in order to be able to change the color of the space between lines.

Object fill vs. Stroke

It is important to create the illustrations in the same way, we:

Fill (draws stuff in the interior of the path )

No, if something is Fill, it is because it is wrong.

Actually the truth is the illustrations must be fill, but in white for a later personalization. (a link to a tutorial about how to create illustrations, how to use the join tool)

Stroke (draws stuff on the border of the path)

There are different Strokes for different situations. If the size of the Stroke must be changed, only even numbers are allowed.

Different styles use different size of stroke because the brush of style. Also the size of the object conditions the size of the stroke.


All our illustrations are made by Strokes, that is why it is important to choose the correct Brush for each illustration and style. Read our tutorial about Brush and Strokes.

Color Palette

A color palette is ready for different styles. Remember, Black is Black with K= 90% (grey color 90% (26, 26, 26)), never pure black and always white color for fillings. Always RGB.


If you are not able to draw something at 400% that have 1 px size between lines, means that you are triying to draw too much detail, so, do not do it.





Matrix Styles for various Icon Types

The illustraStock Style Production Guide provides an overview of the various icon types and context that define the illustraStock icon approach.

Having a system based design ensures a unified brand expression. It also enables us to provide a variety of icon styles that are flexible and complimentary.

There are two key concepts that are useful to understand before proceeding:




Matrix System & Structure Copyright © by illustraStock. All Rights Reserved.

Share This Book