Specs

Size: The size of the pictograms are 48px, 64px and 80px. It's important to note that using a smaller size than these would require the usage of an icon. The pictograms will always be created at 80px and then scaled down after the stroke outline has been applied. The distinction between these sizes lies in the fact that the 48px one doesn't have a background square. The usage of these sizes relies on the specific layout they will be placed in. Remember to maintain a visual balance and avoid overwhelming the content. The correct space balance helps to enhance the overall experience.

Color: Use the Night color scheme for generic shapes but highlighting some detail in Indigo. With the semantic pictograms, the indigo will be replaced by the Night, and it has a Semantic detail.

The Indigo's icon detail should be subtle and never can fill more space than the Night one.

Gradients: The background square using a subtle gradient to the background enhances the composition's balance. It’s pretty useful for keep a good visual balance. The position of the square will depend on the pictogram itself, the designer should see which side works better for the composition. In the case of the pictograms with a size of 48px, this background square will be removed.

Details: It's crucial to have a safe area to ensure that pictograms don't exceed the boundaries of it and to make sure the balance and the consistency are working among every pictogram. For the pictograms, these are 7px for every side. Maintain a consistent stroke width of 2.5px.

Build guideline

The editable version of the pictogram is the 80px variant you can find in the MDS Visual Assets Library.

Continuous line

When engaging in the process of drawing, it's crucial to make an effort to encompass as much of the pictogram as possible using a continuous line. This approach plays a significant role in creating a unified and visually appealing design. It forms an integral part of the overall style and should always be present as far as possible.

Depth and dimension

To introduce depth and dimension into your drawings, employing strokes with gradient effects can prove to be highly beneficial. Such strokes can simulate lines passing beneath one another, resulting in an elevation effect. However, caution must be exercised when utilizing gradients that are too close together, as this could lead to a distracting flash effect. The use of gradients should serve as a subtle detail rather than overpowering the main focus of the pictogram.

Let’s follow these rules:

• Every pictogram needs to have gradient.
• Don’t do it too prominent, it should be only a detail.
• Place it where a trace ends.

Spot detail

We find the color detail as a part of the pictogram style. It’s not necessary to apply it, just if there’s convenient to do it. This Indigo color detail should be subtle and never can fill more space than the Night one, neither take the spotlight.

Keep these rules in mind:

• Don’t have more than one element highlighted.
• Don’t include it in long parts.
• Don’t overlap on the Night trace.
• It can’t be a part of the gradient.

Simplicity

In order to fully understand the meaning of a pictogram, it’s pretty important to create a composition that is both simple and clean. By avoiding the addition of unnecessary elements and ensuring that all visuals are grouped together, we can better achieve our desired goal.

Background square

The specs of the background square cannot be altered. Only the position is possible to be changed.

The square element helps to keep a balance and add some substance to the composition. There’s some freedom by moving the square within the work area, but it’s important to not forget these points:

• When creating a pictogram, it's important to consider the placement of elements. Instead of adding the square in a center-aligned position, try to balance it with the outlined pictogram. This will help create a more harmonious and visually appealing design.
• When working with the 80px size pictogram, maintain a consistent corner radius of 16px. This ensures that the design remains visually cohesive and aligned with the intended style.
• Keep the color and gradient as they are. Consistency plays a crucial role in creating a cohesive design language.

Semantic Badge

When a pictogram contains a status badge, it's important to ensure that the size of the badge is 30px within the context of a 80px sized pictogram.