Pictograms - Design

All Michelin pictograms follow the same design grid, padding, and are as much as possible inspired by primitive shapes when applicable. The grid helps guide design choices, contributing to a unified approach to the pictogram system. It allows flexibility in creating appropriate, precise, and uniform shapes to effectively communicate the right message.

All pictograms are designed on a 48px*48px grid. This 48px*48px grid is the smallest size for a pictogram (in contrast to icons, which are designed at a 2:2 scale). By designing a pictogram at a 1:1 scale, we ensure its readability and understanding at all larger sizes.

Primitive, basic, or reference shapes are used to create the most uniform designs possible in a set/kit of pictograms. This helps establish stable foundations within the kit. It creates a connection between different creations that share the same basic shapes (e.g., a smartphone, a laptop, and a tablet; a compass and a clock; a ticket, a book, and a document, etc.).

To ensure a clear and consistent user experience, it is essential to maintain visual and conceptual coherence between the pictograms and icons used across all Michelin mediums. Certain symbols, such as the car or the tire, frequently appear in various contexts:

• For example, in the "business line 4W" pictogram and the "Search by HSN/TSN" pictogram, the car symbol is used.

To avoid confusing users and preserve intuitive understanding, it is recommended not to multiply variations of these symbols. Each reuse should follow a unified design: same style, same proportions, same level of detail. This helps reinforce the overall visual identity and makes it easier for users to recognize the associated concepts.

Authorized icon styles:

• Semi-solid: Solid shapes and hollow shapes

• Outlined: Shapes made from strokes

• Filled-outlined: Solid shapes and strokes

• Flat: Solid shapes in different colors

These styles were selected to maximize the impact, readability, and coherence of graphic elements across all Michelin interfaces.

Other styles, such as "solid" and "handdrawn," are not suitable for the use and design of pictograms. "Solid" is too coarse for pictograms, and "handdrawn" is too childish/playful for the Michelin universe.

Colors are splitted in two big categories:

• Monochrome : One color, customizable, no suffix in the naming convention (”null”)

• Colored : Two or more colors, not customizable, “static_color” suffix in the naming convention

The pictograms provided in monochrome are intended to remain monochrome. Only colored pictograms use multiple colors. In such cases, only the allowed colors are provided.

To standardize the appearance of pictograms across Michelin interfaces, we only use stroke thicknesses of 2px and 1px at the 1:1 design scale, meaning 48px*48px.

To maintain consistency and uniformity across all designs, it is essential to limit the use of these two stroke thicknesses.

Butt caps should be preferred for stroke endings. Especially in designs where roundness is added, butt caps provide a sense of anchorage and stability to the creation.

All joints in an icon design are rounded. The "round join" creates lighter, softer, and more aesthetically pleasing designs compared to its counterparts, "miter join" and "bevel join."