La marque de l'État

Le bloc-marque

Le bloc-marque permet aux usages de reconnaître un site en lien officiel avec le gouvernement.

Entête du site beta.gouv.fr avec le bloc-marque de l'État

Il est composé d'une Marianne, d'un intitulé officiel, de la devise française et parfois complété de logos.

Intitulé du bloc-marque

La structure du bloc-marque varie selon le site sur lequel il se situe. Dans le cadre des start-ups d’état, on peut retrouver ces cas d’usages :

Les logos du site

Dans le contexte des start-ups d’état, souvent en lien vers des usagers, le bloc-marque peut être accompagné d’un ou plusieurs logo : celui de la SE, mais aussi celui de l’opérateur publics ou de l’entité servicielle.

Emplacement du bloc

Le bloc-marque sera situé en-tête ou dans le footer selon les cas :

Dans le cas où le bloc-marque est en pied de page de site, il peut être accompagné d’une légende :

Exemple de bloc-marque en pied de page

Règles de design UI

Les dimensions

L’intégration du bloc-marque sur le web Desktop doit respecter certaines règles.

Exemple d'entête sur Desktop

Les marges entre le bloc-marque et le nom du site sont de :

  • 80 px si le nom du site est le nom de la SE ;

  • 40 px si la SE a un logo.

Les marges entre le bloc-marque et le reste du contenu :

  • 30px au dessus et en dessous.

L’entête (le bloc marque-état et le nom du site) doit respecter certaines dimensions :

  • L’ensemble ne doit pas dépasser 5 colonnes sur un système de 12 grilles.

  • La hauteur du nom du site (ou de son logo) maximale est celle du bloc-marque. Le nom du site sera centré dans la hauteur.

Le fond

Le bloc-marque est posé en priorité en couleur sur fond blanc. Sur un fond coloré, il est intégré au sein d’un cartouche blanc.

Cotes du cartouche blanc

Exemples d'utilisation sur fond couleur et fond photo

Le responsive

Actuellement, le cas n’a pas été décrit dans la charte officielle.

Plusieurs SE sont en contact avec le SIG pour trouver un compromis permettant de garantir l’officialité d’un site tout en prenant en compte les petites surfaces telles que les sites sur mobile.

La typographie

La typographie Marianne est uniquement dédiée au print et n'est pas destinée au web.

La typographie pour le web est encore en cours de développement. Calendrier prévu pour septembre 2020.

Exemples d’applications

⭕️ A compléter.