Team design · à la demande d'Amir

Charte visuelle de Tilly, orientée Contour Plus

Direction graphique bleu-forward inspirée de Contour Plus / Ascensia : registre clinique, premium, chaleureux et accessible pour la PWA CRM terrain des visiteurs médicaux. Ce document présente les trouvailles de la team : palette, typographie, imagerie, ton de voix, arbitrage de couleur et décisions à trancher.

Identité

Le logo Tilly

Un lecteur Contour Plus stylisé — silhouette fidèle au vrai appareil — dont l'écran s'allume d'un visage. Le point du « i » et la bandelette de test reprennent le vert de la marque. Deux variantes selon l'usage.

•‿• M T lly Avec bandelette de test insérée
•‿• M T lly Version épurée, sans bandelette
•‿• M
Icône · avec bandelette
•‿• M
Icône sans bandelette · sur navy

01 — Palette

Une palette bleu-forward, ancrée sur des HEX exacts

Les couleurs primaires et secondaires proviennent du CSS du site officiel Ascensia / Contour Plus et de Brandfetch (HEX exacts). Chaque swatch indique son rôle et sa règle de contraste — plusieurs teintes servent d'aplats uniquement et ne doivent pas porter de texte sur blanc.

Primaire

Ascensia Deep Navy
#021D5A
Primary
AA/AAA texte sur blanc · marque UI, en-têtes, texte fort
Midnight Blue
#002663
Marque officielle
AA/AAA texte sur blanc · logo, splash, éléments de marque

Secondaires

Link Blue
#337AB7
Secondary
AA texte sur blanc · liens, boutons secondaires, états
Sky Cyan
#69C8E6
Secondary
Aplats/fonds seulement · touches lumineuses, badges

Accents

Golden Yellow
#FDB910
Accent · CTA
Texte foncé dessus · CTA primaire, énergie de marque
Contour Green
#7AB800
Accent · le « plus »
Aplats/pictos · rappel de marque, accent positif

Sémantiques

Success Green
#009639
Succès
AA sur blanc · validation, visite réalisée, croissance
Warning Amber
#E8A33D
Attention
Texte foncé dessus · échéance proche, priorité suivante
Error Red
#C8102E
Erreur
AA sur blanc · risque, valeur négative

Neutres

White
#FFFFFF
Fond
Fond principal, cartes, respiration
Grey 50
#F4F4F4
Fond
Fonds de sections, cartes secondaires
Grey 200
#E5E7EB
Bordures
Séparateurs, jauges
Grey 400
#9CA3AF
Désactivé
AA large · placeholders, légendes
Grey 700
#4A4A4A
Texte 2e
AA sur blanc · corps de texte secondaire
Grey 900
#111827
Texte 1er
AAA sur blanc · texte principal (long corps)

02 — Typographie

Une humaniste géométrique, échelle nette, chiffres tabulaires

Pile système par défaut (aucune police distante bloquante en PWA), avec option d'auto-héberger Inter / Source Sans 3 pour un caractère plus « marque ». Titres en Bold 700, sentence case privilégiée sur mobile terrain. Base 16 px, ratio ~1.25.

Display · 32 / 700Tournée du jour
H1 · 26 / 700Pharmacies à visiter
H2 · 21 / 600Objectif hebdomadaire
H3 · 18 / 600Prochain rendez-vous
Body · 16 / 400Corps par défaut, lisible et confortable sur le terrain, même en plein soleil.
Small · 14 / 400Légende, métadonnée, information de second plan.
Caption · 12 / 500ÉTIQUETTE · BADGE
KPI · 38 / 700 tab.128 visites

03 — Imagerie & iconographie

Lumineux, clinique et chaleureux — jamais anxiogène

Beaucoup de blanc, un registre santé rassurant, un système d'icônes unique et cohérent.

Imagerie

  • Product shots : lecteur de glycémie sur fond blanc, bandelettes, app compagnon — cadrage net, ombre douce.
  • Photographie humaine : santé du quotidien, chaleureuse, en médaillon circulaire à anneau bicolore navy + vert.
  • Registre : lumineux, beaucoup de blanc, clinique mais chaleureux.
  • Textures : trames de points demi-teinte et ondes en filigrane, discrètes.
  • À éviter : stock corporate générique, visuels sombres ou dramatisants.

Iconographie

  • Style line icons unique (trait 1.5–2 px, coins arrondis) — ex. Lucide / Phosphor, auto-hébergé.
  • Motif signature : picto trait blanc dans une pastille circulaire pleine (navy / cyan / vert).
  • Jeu métier : pharmacie, lecteur, patient, cible, rendez-vous, itinéraire, poignée de main.
  • Codage sémantique constant : vert = positif, rouge = risque, amber = attention.
  • Ne jamais mélanger deux styles d'icônes.

04 — Ton de voix

Accompagner le terrain, jamais le surveiller

Registre médical de confiance, rassurant, simple et précis, qui donne du pouvoir d'agir au visiteur médical.

accompagnerprécisionpartenariat terrainclartéfiabilité empowermentau service du VM

✓ Do

  • Phrases courtes, actives, orientées action utile pour le VM.
  • Vocabulaire de partenariat et d'accompagnement.
  • Chiffres et statuts clairs, sans jargon.
  • Registre médical de confiance, rassurant et simple.

✕ Don't

  • Mots interdits : surveillance, contrôle, traçage / tracer, conformité et leur champ lexical.
  • Ton froid, punitif ou hiérarchique descendant.
  • Anglicismes gratuits.
  • Dramatisation ou culpabilisation.

05 — Arbitrage couleur

Teal Tilly vs bleu Contour

Amir demande une direction « plus orientée Contour ». Le socle Contour est bleu (déclinaison nommée « Contour Plus Blue »), documenté par HEX exacts. Le teal était un choix provisoire sans ancrage marque.

Bleu Contour / Ascensia
Ascensia Deep Navy
#021D5A · #002663
✓ Recommandé — primaire
Teal Tilly provisoire
Provisional Teal
#0E9384
Retiré du rôle primaire
Recommandation. Adopter le bleu marine Contour/Ascensia (#021D5A opérationnel, #002663 marque) comme primaire de Tilly et retirer le teal #0E9384 du rôle primaire. Le navy offre un contraste texte AA/AAA et un registre clinique premium immédiatement cohérent. Option de continuité à trancher : repositionner le teal en accent secondaire réservé aux affordances CRM terrain, harmonisé à la famille Contour — par défaut, la charte ne le retient pas pour rester resserrée et bleu-forward.

06 — À trancher

Décisions ouvertes pour Neil & Amir

Six arbitrages à confirmer avant de figer les tokens de marque.

  1. Teal #0E9384 — retiré totalement (recommandé) ou conservé comme accent terrain secondaire harmonisé ?
  2. Primaire opérationnel — #021D5A (site) vs #002663 (Brandfetch officiel) : choisir un token de marque unique.
  3. Vert — garder #7AB800 (marque) ET #009639 (succès), ou n'en conserver qu'un pour resserrer ?
  4. Titres — pile 100 % système, ou auto-héberger Inter / Source Sans pour un caractère plus « marque » ?
  5. Casse des titres — sentence case (recommandé mobile) vs CAPITALES (fidèle aux decks) ?
  6. Typeface de marque Ascensia — non confirmé (pile système côté site) : à demander au client si fidélité exacte requise.
Tilly — charte visuelle orientée Contour Plus / Ascensia · Trouvailles de la team design, à la demande d'Amir · HEX primaires/secondaires exacts (CSS site + Brandfetch), couleurs de decks estimées écartées en cas de conflit.