Charte graphique Camptocamp Association

Activités :
Catégories : association
Type d'article : collaboratif (CC by-sa)

L'objectif de cet article est de récapituler les différents points graphiques (topoguide, forum, autres) concernant la communication autour du projet C2C.

Généralités

Couleurs

Couleur "orange c2c" (logo, trait sous le menu horizontal) :

  • Rgb : rgb(255, 153, 51)
  • Hex : #ff9933 (raccourci #f93)

Couleur "orange fond" (topoguide et forum) :

  • Rgb : rgb(251, 250, 246)
  • Hex : #fbfaf6

Couleur "gris" (logos activités quand ils ne sont pas orange, polices de caractères dans le menu et sur les cards)

  • Rgb : rgb(74, 74, 74)
  • Hex : #4a4a4a

Couleur "noir montagne" (montagne du logo Camptocamp.org)

  • Rgb : rgb(38,35,35)
  • Hex : #262323

Couleur vert logo "Itinévert" :
* Rgb : rgb(25, 163, 7)
* Hex : #19a307

Logo : svg sur github
Activités : svg sur github

Polices logos

Logo Camptocamp-Association :
Couleurs idem logo camptocamp.org
Police Segoe Print : "association"

Logos autres :
Police Forte : « vert » (Itinévert), « org » + le « o » de to (Camptocamp.org)
Police Caldense Bold : « camp » du logo + « Ye_i » (pour Yeti) + « I_iné » (pour Itinévert)

Encart de publicité :

  • taille : 728 x 90 pixels sur grand écran et 300 x 250 sur petit écran (ex: smartphone)
  • format : jpg, gif, gif animé, png, flash
  • poids maximal : poids conseillé = 15 à 20 ko

Topoguide

Police

En ordre de préférence : « Segoe UI », Roboto, Oxygen, Ubuntu, Cantarell, « Fira Sans », « Droid Sans », « Helvetica Neue », Helvetica, Arial, sans-serif.

Icônes

Utilisation des icônes issues de FontAwesome en priorité.
Menu de gauche :

  • Topoguide : fa-arrow-right
  • Sorties : fa-sun + fa-cloud
  • Forum : fa-comments
  • Incidents et accidents : fa-flag-checkered
  • Articles : fa-newspaper
  • Aide : fa-life-ring

Forum

Discourse ne permet pas d'utiliser les mêmes icônes que le topoguide. Il utilise Glyphicon.

Menu de gauche :

  • Topoguide : glyphicon-arrow-right
  • Sorties : glyphicon-time
  • Forum : glyphicon-comment
  • Incidents et accidents : glyphicon-warning-sign
  • Articles : glyphicon-file
  • Aide : glyphicon-info-sign