Gris (g7) #4a5568 | Marron (m7) #68524a | Violet (f7) #725794 | Bleu (b7) #2c6a82 |
---|---|---|---|
#f7fafc | #fcf7f7 | #fbf5ff | #ebfdff |
#edf2f7 | #f7eeed | #edd8fd | #b4e8fa |
#e2e8f0 | #f0e5e2 | #dcbcfa | #7ddbf0 |
#cbd5e0 | #e0cecb | #c194f4 | #42c4e1 |
#a0aec0 Ratio > 4.5:1 (texte noir) | #c0a6a0 Ratio > 4.5:1 (texte noir) | #a87ede | #31acce Ratio > 4.5:1 (texte noir) |
#677890 Ratio > 4.5:1 (fond blanc) | #916f65 Ratio > 4.5:1 (fond blanc) | #977ac2 Ratio > 4.5:1 (texte noir) | #2b8fb0 |
#4a5568 | #68524a | #725794 Ratio > 4.5:1 (fond blanc) | #2c6a82 Ratio > 4.5:1 (fond blanc) |
#2d3748 | #48342d | #50386e | #2a5265 |
#1a202c | #2c1f1a | #3d2957 | #094157 |
Vert (v6) #6c7e31 | Orange (o6/o7) #cc4e13 | Rouge (r8) #c42719 | Jaune (j6/j7) #c47123 |
---|---|---|---|
#fdfff0 | #fff9f0 | #fff6f5 | #fffbf0 |
#dde69a | #fee7c8 | #fedcd7 | #fff2c2 |
#c5d368 | #fbc98d | #febbb2 | #ffdd82 |
#a8bb48 | #f6a055 | #fc8f81 | #f2b43f |
#889e3a Ratio > 4.5:1 (texte noir) | #fc8e3a | #f57665 | #e09731 |
#6c7e31 Ratio > 4.5:1 (fond blanc) | #dd6418 Ratio > 4.5:1 (texte noir) | #e65740 Ratio > 4.5:1 (texte noir) | #d4820c |
#556727 | #cc4e13 Ratio > 4.5:1 (fond blanc) | #d93e25 Ratio > 4.5:1 (fond blanc) | #c47123 Ratio > 4.5:1 (texte noir) |
#465422 | #9c3c1c | #c42719 | #a3551d Ratio > 4.5:1 (fond blanc) |
#364219 | #7b2f1a | #9c221c | #853c17 |
Feuille de style
Le thème s’appuie sur Bootstrap 4.3, il contient donc les même classes.
Il contient en plus les classes qui correspondent à la palette ci-dessus.
Elles sont construites avec :
-
un prefix
fb-
(b = background) oufc-
(c = color) - suivi de la lettre de la couleur (g = gris, m = marron, b = bleu, v = vert, o = orange, r = rouge, j = jaune, f = fiolet 😛)
- et de son rang dans le tableau (de 1 à 9).
Exemple : pour utiliser le framaviolet #725794
comme couleur d’arrière-plan, la classe est fb-f7
.
Pour le texte, il y a 2 classes supplémentaires :
-
fc-dark
(=#1f1f1f
) et -
fc-light
( =#ffffff
).
Les liens sont soulignés
à l’aide d’un background
et ne sont volontairement pas colorés.
body {
font-family: Roboto,sans-serif;
color: #1f1f1f;
background-color: #e2e8f0;
}
.ombre {
background-color: #ffffff;
box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);
}
h1 { font-family: DejaVu Sans,Verdana,Geneva,sans-serif; }
h2-h6 { font-family: Roboto,sans-serif; }
hr.trait {
background-color: #edf2f7;
height: 11px;
}
a {
color: #1f1f1f;
background-image:
linear-gradient(#a87ede, #a87ede),
linear-gradient(#a0aec0, #a0aec0);
}
a:hover, a:focus { color: #1a202c; }
.signature { color: #68524a; }
En pratique
Il faut utiliser le moins de couleurs possible.
L’important étant de respecter les thématiques propre à Framasoft (cohérence interne) et d’être logique par rapport au rôle fonctionnel lié aux classes de Bootstrap dont le sens est communément admis (cohérence externe) :
Couleur | Cohérence interne | Cohérence externe |
---|---|---|
violet | ce qui est générique et relatif à Framasoft | élément primaire |
bleu | les logiciels libres (qui requièrent une installation) | élément secondaire, info, lien |
vert | les services en ligne et les liens vers framacloud | succès, validé, ok… |
orange | ce qui est générique et relatif à Framasoft | attention, important… |
rouge | la culture libre | danger, erreur, pas ok… |
jaune | les liens « Faire un don » et les outils « en vrac » (framacolibri, forum, en vente libre, wiki, etc) |
Le marron ne devrait servir que comme couleur de texte alternative au noir / gris.
En théorie, pour une page web, une vidéo de démo, un diaporama…
on ne devrait avoir besoin que de 2 couleurs : le violet + une autre
issue de l’entête du tableau.
Les autres couleurs du nuancier servent uniquement si on recherche
un effet de contraste ou de profondeur donc en général
c’est plutôt pour des éléments graphiques ponctuels.
Accessibilité
Les couleurs claires + texte noir sont valides du haut du tableau jusqu’au 1er Ratio > 4.5:1 (texte noir).
Les couleurs foncées + texte blanc sont valides du 2ème Ratio > 4.5:1 (texte blanc) jusqu’à la fin.
Entre les deux, les couleurs marqué d’un Ratio > 3:1 et < 4.5:1 peuvent être rendues accessibles :
-
en ajoutant un ombrage sur le texte (ex:
text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
si le texte est blanc). Ça ne passera pas à la validation mais ça améliore la lisibilité ; - en augmentant la taille du texte au delà de 24px. Ça passe à la validation ; c’est ce qui est utilisé pour les framatitres (marqués d’un dans le tableau)
En règle générale, lorsqu’on veut distinguer plusieurs éléments similaires (par exemple des boutons), il vaut mieux utiliser des symboles plutôt que des couleurs (on peut aussi combiner les 2).
Pour que les lecteurs d’écran ne lisent pas les caractères unicodes correspondants aux icônes Fork Awesome (ils sont incompréhensibles), il faut respecter cette syntaxe :
<i class="fa fa-fighter-jet" aria-hidden="true"></i>
De même, si l’icône est liée à une action (lien, bouton, etc),
on applique la même logique qu’avec les images en fournissant
un texte alternatif pour les lecteurs d’écran et/ou un title
.
Exemple avec ce bouton
Framasoft
<a class="btn btn-sm btn-outline-secondary" href="https://framasoft.org" title="se rendre sur Framasoft" > <i class="fa fa-fighter-jet" aria-hidden="true"></i> <span class="sr-only">Framasoft</span> </a>
Typographie
En français, pensez à mettre des espaces insécables devant les signes de
ponctuation double (:!?;
etc.), dans le formatage des nombres
(symboles monétaires, pourcentages, etc) ou avec les guillemets français
(«
et »
).
Rappel : le code HTML de l’espace insécable est
En anglais et dans d’autres langues, les guillemets sont “
et ”
et non pas "
qui sert pour le code.
Utilisez des apostrophes typographiques
Rappel : le code HTML de l’apostrophe typographique est
’
Les points de suspensions ont également un caractère unique plus
élégant …
. Son code HTML est …
Même si c’est tentant, on ne met pas de majuscule au milieu de Framasoft, Framapad… Une au début suffit.
Framasoft
Framalibre
Framablog
Framadate
Framacolibri
Titre h1
Titre h2
Titre h3
Titre h4
Titre h5
Titre h6
SecondaryPrimarySuccessInfoWarningDangerLightDark
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Images
Les sources de toutes ces images se trouvent dans
ce fichier .svg.
Les emblèmes sont créés à partir des icônes de
Fork-Awesome
pour les utiliser dans Inkscape, il faut ajouter le fichier .ttf
dans votre dossier ~/.fonts
(sous Linux).
Logo
Historiquement, les Pingouins de L.L. de Mars sont des manchots : ils ne peuvent pas voler.
Ce manchot (planche originale) a été choisi car il sort de sa condition en agissant différemment de ses congénères. Ça lui demande de gros efforts aussi bien physiquement que socialement et puis il a un air cinglé aussi… un peu comme bien des libristes 😉
Icônes
Apple Touch Icons
Favicons
Par service avec emblème Fork Awesome
Les icônes sont générées dynamiquement en javascript à partir d’un template SVG.