Print Friendly, PDF & Email

Marque & logo

Chorus Pro en deux mots, s’écrit avec une majuscule au C et au P.

 

Le logo est indissociable du nom de marque.

Taille du logo dans le header de Chorus Pro : width: 161px, height: 59px.

Le logo placé dans le header est aligné à gauche avec les blocs en dessous.

Les couleurs

La couleur principale

Le bleu #006D99  est la couleur principale de Chorus Pro.

Il est utilisé :

  • pour les titres actifs du menu principal
  • le titre des blocs
  • le titre des tableaux
  • les titres et sous titres de pied de page
  • certains boutons, icônes

 

Les couleurs secondaires

  • #0A364A : background sous-menu
  • #B3B3B3 : typographie sous-menu + indicateur statut de rattachement inactif
  • #585858 : corps de texte (body) + Titre inactif menu principal
  • #878788 : typographie header
  • #E4E4E4 : bordure bloc et couleur background tableau en alternance avec #FFFFFF
  • #088578 : couleur attribuée aux nouveaux sur Chorus Pro (Accueil)
  • #2DAB3B : utilisé en background des boutons interrupteurs et boutons indicateurs
  • #D1F8E0 : indicateur statut de rattachement validé
  • #AC4463 : couleur attribuée aux recherches d'une structure publique (Accueil)
  • #FBBBB9 : statut de rattachement refusé
  • #FBECFE : statut de rattachement en cours de validation
  • #F8FAB9 : statut de rattachement désactivé
  • #FFFFFF : background page, bloc
  • #7FC4FD : listes déroulantes, bordures éléments navigations pages, bordures boutons radio et checkbox
  • #0077DB : couleur attribuée aux boutons, zone ou icônes cliquables ou requérant une action de l'utilisateur

Les boutons d'action sur Chorus Pro peuvent être de deux types :

  1. principaux, utilisés pour mettre en avant et guider l'utilisateur vers l'action principale d'une page ou d'un tableau ;
  2. secondaires, utilisés pour les actions secondaires d'une page ou d'un tableau.

 

Les boutons principaux sont des boutons dit "pleins".

Exemple de bouton principal :

Les boutons secondaires sont dit "vides"

Exemple de bouton secondaire :

Le style appliqué pour un bouton

Il existe deux tailles différentes de bouton en fonction des écrans :

  1. Les boutons principaux "moyens"
    • width: 148px;
    • height: 33px;
    • border-radius: 4px;
    • background-color: #0076db; (on se référera au prototype XD pour appliquer la couleur contextuel à l'écran).
  2. Les boutons secondaires "moyens"
    • width: 148px;
    • height: 33px;
    • border-radius: 4px;
    • border: 2px solid #0076db;
  3. Les "grands" boutons principaux
    • width: 300px;
    • height: 33px;
    • border-radius: 4px;
    • background-color: #088578; (on se référera au prototype XD pour appliquer la couleur contextuel à l'écran).
  4. Les "grands" boutons secondaires
    • width: 300px;
    • height: 33px;
    • border-radius: 4px;
    • border: 2px solid #088578; (on se référera au prototype XD pour appliquer la couleur contextuel à l'écran).

Les boutons

La typographie

La typographie utilisée pour Chorus Pro est : Proxima.

Elle est fournit dans le dossier UX Elements.zip sur demande.

Les espaces

Taille des zones

  • zone header : height: 103 px;
  • zone menu : height: 70px;

Espacement entre les éléments

  • (header) positionnement du logo Chorus Pro dans le header : centré verticalement au milieu de la zone, aligné à gauche horizontalement
  • (bloc) espacement entre les blocs : 30px
  • (bloc) Titre bloc // bordure ext bloc : 23px ;
  • (bloc) information bloc // information bloc (exemple numéro de la facture) : 9px;
  • (tableau) titre tableau // tableau : 23px;
  • (tableau) titre tableau // flèche de tri : 8px;
  • (tableau) press button // text : 8px;
  • (tableau / bloc) bouton action // tableau et bloc : 23px;
  • (tableau) icon action // icon action : 8px;
  • (tableau) text // bordure ext tableau : 15px;
  • (footer) bloc // footer : 30px;
  • (formulaire) titre liste ou champ // champ ou liste déroulante : 6px;
  • (formulaire) * (champ obligatoire) // champ texte : 6px;

Les blocs

Mise en forme

  • box-shadow: 0 2px 9px rgba(0, 0, 0, 0.16);
  • border: 1px solid #e4e4e4;
  • background-color: #ffffff;

Les champs de formulaire

  • Label menu déroulant - Proxima Nova Alt, 13px, Regular, #006D99, espacement 6px de l’Elément du menu déroulant
  • Elément du menu déroulant - Proxima Nova Alt, 13 px, Bold, #006D99, espacement 9px du trait
  • Trait 2px hauteur, #7FC4D
  • Flèche déroulante centrée par rapport au label soit 15px par rapport au trait
  • Champ grisé :  #E4E4E4
  • Champ erreur : #DE3535 (bordure)
  • Interlignage entre champs : 16px

Les tableaux

Back To Top