Design system v2.0
Charte graphique CreditBlog.fr
Une identité « Le Portail » : le crédit lu comme dans la presse économique — papier clair, titres en serif éditorial, rouge de rubrique, bleu marine de structure. Tout ce qui suit est intégré dans creditblog.css, chargé par chaque page.
1. Principe directeur
Le crédit se lit comme une analyse de presse, pas comme un tableau de bord. La charte l’assume : fond papier clair pour privilégier la lecture longue, titres en serif pour l’autorité éditoriale, monospace réservé à ce qui relève de la mesure (dates, unités, étiquettes de rubrique), et une seule couleur vive — le rouge — pour tout ce qui doit accrocher l’œil : rubriques, CTA, chiffres clés. L’or signale ce qui coûte, le rouge sourd ce qui menace. Un lecteur doit pouvoir déduire la nature d’une information de sa seule couleur.
2. Palette
Fond principal de toutes les pages.
Sections alternées, sommaires, pied de page.
Titres, logo, en-têtes de tableaux, bandeau ticker.
Accent principal : rubriques, CTA, chiffres clés.
Accent secondaire : sous-titres, structure, focus.
Texte courant.
Texte secondaire, légendes, chapôs.
Point de vigilance, coût, frais.
Risque, refus, pratique illégale.
Le rouge ne s’utilise jamais en fond de bloc plein, uniquement en accent, en filet, en fond de bouton ou en valeur chiffrée. Un seul bouton rouge plein par écran visible : au-delà, plus rien ne ressort.
3. Typographie
| Rôle | Fonte | Graisses | Emploi |
|---|---|---|---|
| Titrage | Plus Jakarta Sans | 500 / 600 / 700 | H1 à H4, kicker vedette, chiffres clés |
| Texte | Inter | 400 / 500 / 600 / 700 | Paragraphes, listes, cartes, navigation |
| Données | Plus Jakarta Sans | 500 / 600 | Étiquettes de rubrique, dates, fils d’Ariane |
Interlignage confortable sur le texte courant, titrage compact et gras, H2 signalés par un court trait bleu, boutons en pilule et cartes arrondies. Les petites étiquettes utilisent la même famille typographique pour garder une identité homogène.
Titre H1 — 3,2 rem
Titre H2 — 1,95 rem
Titre H3 — 1,32 rem, en italique marine
Texte courant Inter 17 px, interligne 1,7. Le gras passe en marine pour créer un troisième niveau de lecture.
DONNÉE MONOSPACE — 0,78 REM
4. Composants
Bandeau chiffres du mois
Chiffres clés
Encadrés
Filet marine. Pour une précision utile, une définition, une règle.
Filet or. Pour un coût caché, un arbitrage à ne pas manquer.
Filet rouge sourd. Pour une pratique illégale, une arnaque, un danger financier.
Une éditoriale
L’accueil ouvre sur un article vedette (.vedette) accompagné d’un classement numéroté (.classement), avant la grille standard des dossiers.
Appel à l’action
Bouton principal Bouton secondaire
5. Règles de mise en page
- Largeur de lecture : 720 px maximum pour le texte, 1220 px pour les grilles et l’en-tête.
- Rayons : discrets et presque droits — 3 px pour les étiquettes et cartes, 6 px pour les blocs, 10 px pour les grands encarts.
- Traits : toujours un filet fin beige-gris (--trait/--trait-fort), jamais de bordure colorée pleine sauf accent de rubrique.
- Un seul élément animé par écran, en apparition douce au chargement (.reveal).
- Accessibilité : focus visible en marine sur 2 px, contrastes conformes AA, prefers-reduced-motion respecté, tableaux défilables sur mobile.
6. Ton éditorial
Phrases courtes, chiffres devant, aucune promesse. On écrit « le coût total augmente de 59 000 € », pas « attention, cela peut représenter un surcoût ». Le lecteur arrive avec une décision à prendre : chaque paragraphe doit soit lui donner un chiffre, soit lui donner une règle. Le vouvoiement est de rigueur, l’impératif réservé aux appels à l’action.
Recevez votre simulation personnalisée
Renseignez votre situation en deux minutes. Un conseiller reprend le dossier, interroge les établissements partenaires et vous rappelle sous 24 heures ouvrées avec des propositions chiffrées.
GratuitSans engagementRappel sous 24 h ouvréesAucune revente de données