Utilisateur:Trizek/Brouillon/Charte

Dans le cadre du projet aide et accueil, plusieurs pages ont été revues suivant une charte graphique nouvelle, basée sur la future charte graphique de Wikipédia (projet Athena).

Cadre d'introduction, en-tête de la page

Une page est présentée par un cadre à fond gris, avec une marge large. Le titre bleu à pour but d'attirer l’œil. Il est suivi par un résumé des points abordés dans la page ou des recommandations. A droite se trouve un cadre de conseils.

La création de l'en-tête d'une page d'aide se fait via une classe CSS englobant l'ensemble des éléments décrits dans cette section : .aa-cadre

Cadre principal

.aa-cadre-principal

Fond .aa-fond

Le fond met en avant le titrage et les conseils à venir. Il est gris clair à liseré gris foncé.

Titrage .aa-titre

Le titre de la page est bleu, basé sur un titre de niveau 2 (<h2>). La typographie est plus importante que le texte standard afin de faire ressortir le contenu.

Texte additionnel

Le texte additionnel du cadre principal est légèrement plus important que le texte standard, en noir. Il permet d'afficher des informations complétant le titre ou résumant la page. Sa mise en forme est incluse dans la classe CSS .aa-cadre-principal.

Cadre secondaire

.aa-cadre-secondaire

Le cadre secondaire est destiné à mettre en avant un conseil ou un avertissement lié au cadre principal. Ce cadre est optionnel.

Le texte est le wikitexte par défaut.

Les titres sont réalisés avec la balise <strong>, associée en fonction du contenu à la couleur idoine.

Texte principal

Le texte principal fonctionne comme un texte classique d'article Wikipédia.

Intertitres

Les intertitres sont assurés par le wikicode des titres.

Texte par défaut

Le texte est celui par défaut.

Cadres particuliers

Relief

Le modèle {{relief}} permet de mettre en avant un élément de contenu.

Encarts

Le modèle {{encart}} permet de mettre en avant un élément à prendre en compte dans un cas spécifique (accessibilité, travaux, etc.)

Éléments utiles

Codes couleur

Les couleurs sont à utiliser avec parcimonie afin que leur sens ne soit pas dévoyé.

• Blanc : par défaut pour les fonds
• Blanc : par défaut pour les textes
• Rouge : avertissement ou erreur .aa-rouge
• Vert : validation .aa-vert
• Bleu : mise en avant d'un contenu .aa-bleu
• Gris clair : fonds pour la mise en valeur .aa-gclair
• Gris foncé : bordures et éléments non activés .aa-gfonce ou .aa-inactif