Logo

Angular

See content

Logo is an identification symbol that represents an organization or a company.

Usage

Logo helps users of the product/service to recognize the brand.

Note: Do not create your own logo or recreate Michelin logo. Use given logos provided by Michelin brand center

Commercial Logo

  • Expresses the Brand’s commitment to offer outstanding performance and strong customer interactions.

  • Supports the entirety of MICHELIN’s products, services and offers and all their associated communication efforts.

michelin logo commercial

Group Logo

  • Expresses the vision, innovation, responsibility, and commitment of the Group

  • Supports the Group’s institutional initiatives and actions

  • Unifies the Group’s multi-brand offers aimed at institutional and B2B (All) targets in specific situations

michelin logo groupe

Anatomy

All the anatomy and authorized usage of the Michelin logo is describes in the Brand Center Michelin's Website

Accessibility

Since <mic-logo> is a linked logo, i.e. its image is the only content of the link that leads to the home page, this component must contain :

Moreover, as it will be used to go to a page of the application, by default the home page, the name of the application must be included (appName, default: 'Design System').

  • the link's URL (link route),

  • the name of the page to which the link is directed (by default, it is the 'Homepage'),

  • the image's alternative (thus, the text 'Michelin'),

  • the application name when appropriately used to return to the current application's home page (example, here it is the Design System),

By default, on Angular, we will therefore have the following content with a simple <mic-logo></mic-logo> component :

<mic-link link="/" ariaLabel="Homepage - Michelin"></mic-link>

The compilation will result in this:

<a target="_self" title="Homepage - Michelin">

<div class="logo-group" style="width: 160px; height: 60px;" aria-hidden="true"></div>

</a>

Therefore, for the case of our Design System application, we have the following elements for Angular : <mic-logo ariaLabel="Homepage - Michelin - Design System"></mic-logo>

Do’s and Don’ts

DO

  • MICHELIN logo should always be visible on all supports.

  • Logo should be placed at the leftmost side on the header navigation.

  • The name of the application should be placed at the right of the logo.

DON'T

  • Do not create your own logo or recreate Michelin logo.

  • Do not distort the proportional of the logo dimensions.

  • Do not use multiple logos on the same page. And it should only be on header navigation.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.