Grand logo nos amis les oiseaux

La charte graphique

Les couleurs

La couleur principale #009688

Cette couleur, nommé "Teal" en anglais est un équilibre quasi parfait entre le bleu et le vert.
Selon votre perception des couleurs, vous la verrez différemment et la nommerez ainsi soit vert-canard soit bleu-canard.

Cette couleur, outre le fait qu’elle porte le nom d’un de nos amis à plumes, symbolise ici l’équilibre de la Nature : la végétation, le vert d’un côté; le ciel et l’eau, le bleu, de l’autre : cet équilibre parfait mais fragile dans lequel tout être vivant évolue, nous compris.

#00675B

La déclinaison foncée

#B2DFDB

La déclinaison claire

La couleur de saillance #FF3D00

Le rouge est le symbole de la vie, de l’action et de la chaleur; l’orange, tout aussi vif, est le symbole du feu et du soleil dont l’oiseau est indéniablement l’animal le plus proche.

Cette couleur est tonifiante et est porteuse d’optimisme, cet optimisme qui nous pousse à protéger notre planète pour nos enfants, l’optimisme de lendemains meilleurs.

Ce rouge orangé représente donc l'optimisme de la vie qui va toujours de l'avant.

#DD2C00

La déclinaison foncée

#FF6E40

La déclinaison claire

La couleur principale du footer #3B3B3B

#222222

La couleur principale d'administration #3F51B5

La volonté était de changer de couleur principale pour toute la partie d'administration afin de la dissocier du site publique.

La couleur bleue représentant la sagesse et la vérité, elle apparait idéale pour symboliser l'administrateur qui a les pleins pouvoirs sur le site.

#002984

La déclinaison foncée

Cas d'usage du logo

Logo sur image

linear-gradient(rgba(0,0,0,0.4), rgba(84,84,84,0))

Sur image avec un filtre dégradé de noir, le logo blanc ombré sera à utiliser dans toutes ses déclinaisons.
Pour le header étendu de la page d'accueil, le logo étendu avec acronyme et titre sera utilisé.

Logo sur couleur principale

#009688

Sur la couleur principale, le logo blanc ombré sera à utiliser dans toutes ses déclinaisons.
La version étendue avec acronyme sera utilisée pour la barre de navigation.

Logo sur couleur d'administration

#3F51B5

Sur la couleur principale d'administration, le logo blanc ombré sera à utiliser dans toutes ses déclinaisons.
La version étendue avec acronyme sera utilisée pour la barre de navigation.

Logo sur fond foncé

exemple avec #3B3B3B du footer

Sur fond foncé, comme dans le footer, le logo couleur ombré sera à utiliser dans toutes ses déclinaisons.

Logo sur fond clair

exemple avec rgba(0, 150, 136,0.07) du background

Sur fond clair, comme ici sur la couleur du background, le logo couleur pourra être utilisé avec ou sans ombre dans toutes ses déclinaisons.

La police d'écriture

La police pour le site est la police préconisée par Google dans ses guidelines du Design Material:
La Google Font Roboto.

Taille et graisse du texte

Objet Desktop Mobile
Slogan Accueil Regular 32px Regular 24px
Titre dans le header image MEDIUM 30PX MEDIUM 20PX
Titre dans la page Medium 20px Medium 20px
Titre dans une card /
Nom user dans page profil /
Nom oiseau dans page observation
Regular 24px Regular 22px
Sous-titre dans le header image Regular 24px Regular 16px
Sous-titre dans la page /
Titre d'un élément de liste
Regular 18px Regular 16px
Body 1 / Body 2 Regular 15px / Medium 15px Regular 14px / Medium 14px
Menu Sidenav Medium 14px Medium 14px
Menu Header Regular 16px
Caption Regular 12px Regular 12px
Button MEDIUM 14PX MEDIUM 14PX

Couleurs du texte sur fond clair

Texte en rgba(0,0,0,0.87)


Texte en rgba(0,0,0,0.54)

Couleurs du texte sur fond foncé

Texte en rgba(255,255,255,1)


Texte en rgba(255,255,255,0.7)

Couleur du texte sur image

avec filtre linear-gradient(rgba(0,0,0,0.4), rgba(84,84,84,0)) sur image


Texte en rgba(255,255,255,1)

Quelques effets d'interaction

Bouton d'action

Bouton

Bouton d'action

Bouton

Bouton flottant

add

Bouton Flat

Bouton Flat

Fenêtre modale

Message de validation

Envoyer

Interrupteur