Charte graphique & description KLINIQ

Document de référence à copier/coller à Gemini ou toute IA pour générer des visuels conformes.

📐 Charte graphique & description de KLINIQ

Document de référence à fournir à un générateur d'images (Gemini, Midjourney, etc.) pour produire des visuels conformes à la marque KLINIQ / SARRAU Santé.

1. IDENTITÉ DE LA MARQUE

Nom : KLINIQ Ligne sous le logo : SARRAU Santé Tagline : La communication clinique qui change le soin. Mission : Former les soignants d'Afrique de l'Ouest à la communication clinique et relationnelle, ancrée dans le terrain ouest-africain. Promesse : Apprendre la communication qui sauve, la pratiquer avec l'IA, l'ancrer par la répétition, gratuitement, à son rythme. Ton de voix : Professionnel, chaleureux, direct, bienveillant. Jamais jargonneux, jamais froid. On tutoie le soignant. On valorise l'excellence sans culpabiliser.

Cible : Médecins, internes, infirmiers, sages-femmes, étudiants en santé, Côte d'Ivoire et Afrique de l'Ouest francophone.

2. LOGO & USAGES

  • Le logo est l'image de marque KLINIQ (à intégrer en haut à gauche des visuels, sur fond blanc dans une pastille arrondie).
  • Le mot « KLINIQ » est écrit en Inter, graisse 800, tracking légèrement négatif (-0.01em).
  • Sous le logo : « SARRAU Santé » en Inter 600, 13-14px, espacement augmenté (0.14em), en MAJUSCULES, opacité ~0.85.
  • Le logo ne se déforme jamais. Toujours sur fond contrasté (blanc pastille sur fond coloré, ou rouge sur fond clair).

3. PALETTE DE COULEURS

Couleur primaire (SARRAU red)

| Rôle | Hex | Usage | |---|---|---| | Primaire | #C41E1E | Boutons, accents, logo, barres d'action | | Primaire hover | #A01818 | États survol | | Primaire foncé | #7B0D0D | Fins de dégradé, textes sur fond clair | | Primaire clair | #FEE2E2 | Fonds d'accent doux, tags, badges |

Dégradé signature (hero)

linear-gradient(135deg, #C41E1E 0%, #9B1515 50%, #7B0D0D 100%)

→ À utiliser pour les visuels « hero », cartes de mise en avant, fonds de posters marketing.

Couleurs d'accent (par module / par fonctionnalité)

| Couleur | Hex | Association | |---|---|---| | Vert émeraude | #10B981 | SPIKES, pratique, succès | | Bleu | #3B82F6 | TeamSTEPPS, équipe | | Ambre / Orange | #F59E0B | Empathie, bien-être, alertes douces | | Indigo | #6366F1 | Fin de vie, soins palliatifs | | Violet | #8B5CF6 / #7C3AED | Coach Stéphan, flash-quiz | | Cyan | #06B6D4 | Terrain ouest-africain, langue | | Rose magenta | #DB2777 | Carrousels énergiques | | Turquoise | #14B8A6 | Répétition espacée |

Couleurs fonctionnelles

| Rôle | Hex | |---|---| | Succès | #16A34A (fond #F0FDF4) | | Avertissement | #F59E0B (fond #FFFBEB) | | Erreur / danger | #C41E1E (fond #FEE2E2) |

Neutres (thème clair, l'application est en thème clair)

| Rôle | Hex | |---|---| | Texte principal | #111111 | | Texte secondaire | #666666 | | Bordure | #E5E5E5 | | Fond carte | #FFFFFF | | Fond subtil | #F5F5F5 | | Fond de page | #F8F8F8 |

⚠️ Ne pas utiliser de thème sombre pour les visuels grand public. Les visuels marketing peuvent utiliser un fond rouge dégradé ou un fond sombre premium (#1A0B0C → accent) avec texte blanc, mais l'app elle-même est claire.

4. TYPOGRAPHIE

Famille unique : Inter (Google Fonts). Graisses utilisées : 300, 400, 500, 600, 700, 800.

Règles :

  • Titres (h1, h2, h3) : Inter 700-800.
  • Corps de texte : Inter 400-500.
  • Boutons / tags / labels : Inter 600-800, parfois en MAJUSCULES avec espacement des lettres.
  • Pour les posters : titres en Inter 800, tracking -0.02em, line-height ~1.04.

Import :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

5. FORMES, RAYONS & OMBRES

| Rôle | Valeur | |---|---| | Rayon petit | 8px | | Rayon moyen | 12px | | Rayon grand | 16px | | Rayon très grand (cartes/phones) | 20-48px | | Pastilles / tags | 999px (pilule) |

Ombres :

  • sm : 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)
  • md : 0 4px 24px rgba(0,0,0,0.10)
  • Cartes en relief : coin doux, jamais dur.

Préférence : coins arrondis marqués (16-22px), pastilles pleines, surfaces blanches sur fond clair, accents colorés en touches.

6. STYLE VISUEL / MOOD

  • Esthétique : clinique, propre, moderne, lisible, optimiste. Proche d'une app santé grand public (type Duolingo pour la pédagogie + Doctolib pour le sérieux clinique).
  • Dispositions : cartes blanches arrondies, beaucoup d'espace blanc, icônes rondes colorées, barres de progression, anneaux de progression (progress rings).
  • Éléments graphiques récurrents :
    • Anneaux de progression (progress rings) avec % au centre.
    • Barres de progression fines et arrondies.
    • Flammes (streak) 🔥, trophées 🏆, étoiles, badges.
    • Ligne ECG/tracé cardiaque en motif décoratif fin (stroke blanc, opacité 0.2) sur les fonds marketing.
    • Pastilles de couleur par module.
  • Photographie (si nécessaire) : soignants africains en tenue professionnelle, lumière naturelle, regard bienveillant, contexte de soin (poste de santé, hôpital ouest-africain). Éviter les stéréotypes ; privilégier dignité et modernité.
  • Icônes : style lucide / line-icons, traits réguliers, parfois dans une pastille de couleur.
  • À ÉVITER : surcharge, polices décoratives, dégradés multicolores criards, ombres dures, thèmes sombres pour l'app, jargon médical opacifiant.

7. FORMATS DE VISUELS MARKETING

  • Posters Instagram feed / stories : 1080 × 1350 px (portrait 4:5) ou 1080 × 1080 (carré).
  • Story : 1080 × 1920.
  • Carrousel : 10 slides max, chaque slide 1080×1350, numérotation discrète « 01 / 10 ».
  • Composition type d'un poster KLINIQ :
    1. Logo KLINIQ + « SARRAU Santé » en haut à gauche.
    2. Tag / pastille d'accent (ex. « ERREUR FRÉQUENTE », « PROTOCOLE SPIKES »).
    3. Hook (gros titre, Inter 800).
    4. Ligne d'explication (Inter 500, opacité 0.9).
    5. Bloc visuel (chiffre géant, étapes numérotées, pastilles de features).
    6. CTA en bas : bouton blanc « Commencer gratuitement » + URL « sarraukliniq.com ».
    7. Tracé ECG discret en bas, cadre intérieur fin.

8. DESCRIPTION DE L'APPLICATION KLINIQ

Pitch en une phrase

KLINIQ est une app mobile (et web) gratuite qui forme les soignants ouest-africains à la communication clinique : modules interactifs, simulations par IA, flash-quizzes quotidiens et entraide entre pairs.

Les grandes fonctionnalités

📚 24 modules cliniques répartis en 6 parcours :

  • Fondamentaux de la communication : SPIKES (annoncer un diagnostic), Empathie & non-verbal, Présence, Barrière de langue & culture.
  • Éthique & décisions difficiles : Éthique, Refus de traitement, Fin de vie (NURSE).
  • Relation & accompagnement : Famille, Doute, Distance, Handicap, Trajectoire, Hybride, Patient partenaire.
  • Practicum du terrain ouest-africain : cas cliniques ancrés dans l'épidémiologie locale.
  • Équipe & leadership : TeamSTEPPS, Interprofessionnel, Leadership, Structuration, Adhésion, Parcours.
  • Sécurité & limites : Limites professionnelles, Erreur médicale (CANDOR), Résilience.

Chaque leçon alterne : QCM à feedback détaillé, dialogues interactifs (choix multiples), mises en situation, intro rédigée.

🤖 7 simulations IA : Le soignant dialogue avec un patient virtuel (IA) sur des cas réels : annoncer un cancer, refus de dialyse, fin de vie, famille qui cache le diagnostic, consultation qui dérive, adhésion qui s'éteint, annoncer une erreur médicale. L'IA joue le patient selon un persona, donne un feedback instantané, mode expert disponible.

⚡ Flash-quiz quotidien : 6 cartes cliniques par jour, auto-évaluation (acquis / à revoir), auto-révélation chronométrée, score, streak, confettis. Banque de 50+ cartes.

🧠 Répétition espacée (algorithme SM-2) : les cartes reviennent au bon moment, juste avant l'oubli ; révision mixte automatique.

✍️ Journal de bord / réflexion : après chaque module : « Qu'est-ce qui m'a surpris ? » + « Une chose à essayer demain » + rappel de micro-pratique à J+3.

🧭 Coach Stéphan : un coach disponible 24/7, conçu par Stéphan Soumah, à qui soumettre un cas difficile ; conseils basés sur SPIKES, NURSE, OARS, adaptés au contexte local.

🏆 Gamification : XP, 5 niveaux (Apprenti Clinicien → Maître en Excellence Clinique), 8 badges, streaks quotidiens, classement des soignants.

👥 Communauté : fil de posts entre confrères (par thématique), défis cliniques (flashs + hebdomadaires générés à partir des leçons de la communauté), défi collectif du jour (objectif commun : 100 cartes validées), événements, badges communautaires.

📄 Certificat SARRAU : délivré à la fin du parcours, partageable.

📊 Analytics & carnet de bord : suivi de progression, radar de compétences, tendances de réflexion, export CSV (admin).

🔔 Rappels : streak, micro-pratique, par notifications.

Protocoles enseignés

SPIKES, NURSE, SBAR/ISBAR, teach-back, OARS (entretien motivationnel), CANDOR / Gallagher (disclosure d'erreur), TeamSTEPPS, cycle de Gibbs (réflexion), SM-2 (répétition espacée), triade de Maslach (burn-out).

Caractéristiques produit

  • Gratuit, à son rythme.
  • Mobile-first, iOS + Android (et web), supporte les safe areas iOS.
  • Thème clair uniquement (lisibilité jour/nuit).
  • Langue : français.
  • Ancrage local : cas et personas ouest-africains (Abidjan, Bouaké, Côte d'Ivoire), respect du pluralisme médical (tradipraticiens, croyances).

9. PROMPT TYPE POUR GÉNÉRER UN VISUEL

« Crée une affiche marketing verticale 1080×1350 pour KLINIQ, une app de formation à la communication clinique pour soignants ouest-africains. Charte : couleur primaire rouge SARRAU #C41E1E, dégradé #C41E1E → #7B0D0D, police Inter, coins arrondis, fond rouge dégradé premium, texte blanc. En haut à gauche : logo KLINIQ + "SARRAU Santé". Tag accent : "[VOTRE HOOK TAG]". Gros titre (hook) : "[VOTRE PHRASE ACCROCHE]". Ligne d'explication. Bloc visuel : [chiffre géant / étapes numérotées / pastilles de features]. En bas : bouton blanc "Commencer gratuitement" + URL "sarraukliniq.com". Style : propre, clinique, moderne, optimiste, façon Duolingo pour le pédagogique + app santé pour le sérieux. Tracé ECG discret. Pas de surcharge, pas de thème sombre. »

Document KLINIQ / SARRAU Santé, charte graphique & description produit. À joindre à toute demande de génération visuelle.