Charte Graphique TP DWWM/CDA

Sauf mention contraire dans les consignes du TP, vous devez respecter les règles suivantes dans vos interfaces utilisateur.

Règles de base

Règle Description
Éco Conception Toujours prévoir un mode clair et un mode sombre et un mécanisme (bouton ou interrupteur) permettant de basculer entre les 2 modes
Les images doivent être optimisées en taille et en poids.
Une page web: < 2 Mo (html, css, js, images etc...).
Mobile first Concevoir l'interface pour les écrans mobiles en premier, puis l'adapter pour le desktop via les Media Queries CSS. (Breakpoints)
Accessibilité UI Conception inclusive pour les personnes en situation de handicap (contrastes suffisants, polices inclusives).
Obligation d'utiliser rem pour les tailles de polices (interdiction d'utiliser px).
Respecter les critères du Référentiel général d’amélioration de l’accessibilité
Accessibilité DYS L'interface doit proposer un mécanisme (bouton ou interrupteur) permettant de basculer l'ensemble des textes en police OpenDyslexic pour les utilisateurs concernés.
Loi de Fitts Tous les éléments cliquables (liens, boutons, icônes) doivent avoir une taille cible minimale de 44px * 44px sur mobile (via du padding si nécessaire)
Defensive Design L'interface ne doit JAMAIS casser si un titre, un texte ou une image est plus long que prévu

Couleurs principales

Couleurs autorisées dans vos interfaces utilisateur.

Couleur Identifiant HEX Description / Utilisation Couleur Texte si utilisée en background
body-bg #F5F5F5 Clair (générique) Sombre
body-cl #111111 Sombre (générique) Clair
surface-bg #FFFFFF Fond des cartes et éléments d'interface Sombre
crm-primary #1b296a Couleur primaire CRM Clair
crm-secondary #ed6840 Couleur secondaire CRM Clair
crm-rf #cf2d4f Rouge CRM/RF Clair
crm-ofp #7db9da Bleu CRM/OFP Sombre
crm-services #f6af2e Jaune CRM/Services Sombre
crm-mecenat #488287 Bleu/Vert CRM/Mecenat Clair

Couleurs Actions / Évènements

Pour gérer les actions et les messages de notification, utilisez obligatoirement les couleurs suivantes :

Couleur Identifiant HEX Description / Utilisation
crm-error #d32f2f Message d'erreur
crm-warning #e67e22 Message d'avertissement
crm-info #0288d1 Message d'information
crm-success #2e7d32 Message de succès/validation

Polices

Sauf mention contraire, utilisez les polices suivantes.
Pour le corps de la page crm-txt-body, choisissez Verdana OU Arial.

Police Identifiant Description / Utilisation
Georgia, serif crm-txt-header Titres, entêtes
Verdana, sans-serif crm-txt-body Textes, corps de la page, formulaires
OpenDyslexic crm-txt-dys Accessibilité
Faciliter la lecture pour les personnes dyslexiques
A télécharger sur le site officiel

Affichage adaptatif

Sauf mention contraire, utilisez les points de rupture suivants :

Catégorie Largeur Usage
📱 Mobile 0 – 767px -
📲 Tablet ≥ 768px @media (min-width: 768px) { }
💻 Laptop ≥ 1024px @media (min-width: 1024px) { }
🖥️ Desktop large ≥ 1280px @media (min-width: 1280px) { }
🖥️ XXL ≥ 1600px @media (min-width: 1600px) { }
🖨️ Imprimantes A4 (21cm * 29.7cm) @media print { }

CSS de base

CSS de base pour le démarrage de vos projets.

:root {
    --body-bg: #F5F5F5;
    --body-cl: #111111;
    --surface-bg: #FFFFFF;   /* Fond des cartes et éléments d'interface */

    /* Couleurs du thème CRM */
    --crm-primary: #1b296a;
    --crm-secondary: #ed6840;
    --crm-rf: #cf2d4f;
    --crm-ofp: #7db9da;
    --crm-services: #f6af2e;
    --crm-mecenat: #488287;

    /* Couleurs d'état / Événements */
    --crm-error: #d32f2f;
    --crm-warning: #e67e22;
    --crm-info: #0288d1;
    --crm-success: #2e7d32;

    /* Polices */
    --crm-txt-header: Georgia, serif;
    --crm-txt-body: Verdana, Geneva, Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* A implémenter : mode sombre */
    }
}

body {
    
}

h1, h2, h3, h4, h5, h6 {
    
}


@media (min-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 1280px) { }
@media (min-width: 1600px) { }
@media print { }