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.

Les couleurs

La couleur principale

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

 

Les couleurs secondaires

  • #002C3E : background sous-menu
  • #878788 : typographie : texte inactif & menu principaux
  • #FAFAFA : background tableau en alternance avec #FFFFFF
  • #E4E4E4 : bordure bloc
  • #088578 : couleur attribuée aux nouveaux sur Chorus Pro (Accueil)
  • #2DAB3B : utilisé en background des boutons interrupteurs et boutons indicateurs
  • #ADE3B8 : 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
  • #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.

Title 1

color: #006d99
font-family: « Proxima Nova Sc Osf »
font-size: 18px; / 1.286 em / 14pt
font-weight: 700; / Bold

Title 2

color: #006d99
font-family: « Proxima Nova Sc Osf »
font-size: 16px; / 1.143 em / 12pt
font-weight: 700 / Bold

Menu Subheader (active)

color: #ffffff
font-family: « Proxima Nova Alt »
font-size: 15px; / 11pt / 1.071 em
font-weight: 700 / Bold

Menu - Title - (active)

color: #006d99
font-family: « Proxima Nova Sc Osf »
font-size: 18px; / 1.286 em / 14pt
font-weight: 700; / Bold

Menu - Title - (inactive)

color: #717171
font-family: « Proxima Nova Sc Osf »
font-size: 16px; / 1.143 em / 12pt
font-weight: 400 / Regular

Menu Subheader (inactive)

color: #b3b3b3
font-family: « Proxima Nova Alt »
font-size: 15px; / 1.071 em / 11pt
font-weight: 700 / Bold

Table – Title

color: #7f7f7f
font-family: « Proxima Nova Alt »
font-size: 14px; / 11pt / 1.000 em
font-weight: 700 / Bold

Body

color: #7f7f7f
font-family: « Proxima Nova Alt »
font-size: 14px; / 11pt / 1.000 em
font-weight: 400; Regular

Secondary body

color: #006d99;
font-family: « Proxima Nova Alt »;
font-size: 13px; / 10pt / 0.929em;
font-weight: 400; Regular

Placeholder

color: #b3b3b3
font-family: « Proxima Nova Alt »
font-size: 13px; / 10pt / 0.929em
font-weight: 400; Regular

Footer title

color: #006d99
font-family: « Proxima Nova Condensed »
font-size: 16px; / 12pt / 1.143 em
font-weight: 700; / Bold

Footer subtitle

color: #006D99
font-family: « Proxima Nova Condensed »
font-size: 16px; / 12pt / 1.143 em
font-weight: 600; Semibold

Button

color: cf. section button
font-family: « Proxima Nova Alt »
font-size: 10px; / 8pt / 0.714em
font-weight: 700; / Bold
text-transform: uppercase

Les icônes

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 : 31px; 25px;
  • (menu) titre // titre : 36px
  • (menu) titre sous-menu// titre sous-menu : 76px;
  • (menu) titre sous-menu // zone sous-menu : 16px;
  • (bloc) espacement entre les blocs : 30px
  • (bloc) Titre bloc // bordure ext bloc : 21px (excepté le titre centré par rapport au bloc cf. maquette XD);
  • (bloc) information bloc // information bloc (exemple numéro de la facture) : 9px;
  • (tableau) titre tableau // tableau : 12px;
  • (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 : 14px;
  • (tableau) checkbox // bordure ext tableau : 40px;
  • (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 5px 9px rgba(0, 0, 0, 0.16);
  • border: 1px solid #e4e4e4;
  • background-color: #ffffff;
Back To Top